Label Text
Label Text provides a simple way to render a label with built-in support for Canvas type tokens.
Usage Guidance
Coming soon!
Examples
Basic Example
LabelText
renders a <label>
element. This component is deprecated in favor of FormField.Label
since it should be used in tandem with form elements.
Cursor
Set the cursor
prop to render a particular cursor when the mouse pointer is hovering over the
label.
Disabled
Set the disabled
prop to provide a visual cue that the label and its associated element are
disabled.
Component API
LabelText
This component is intended to be used for labeling input fields.
By default, it renders a semantic label
element.
It also uses the subtext.large
typeLevel by default:
- font-size: 14px (0.875rem)
- font-weight: regular (400)
import { LabelText } from '@workday/canvas-kit-react/text';const CustomLabelText = () => (<LabelText>Input Label Text</LabelText>);
Layout Component
Label
supports all props from thelayout component.
Props
Props extend from label. Changing the as
prop will change the element interface.
Name | Type | Description | Default |
---|---|---|---|
typeLevel | | ||
disabled | boolean | Disabled state as a boolean
| |
variant | 'error' | 'hint' | 'inverse' | Type variant token names:
| |
cs |
| The
| |
children | ReactNode | ||
as | React.ElementType | Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care. | label |
ref | React.Ref<R = label> | Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If |
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section