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
is built on top of Text
and renders a <label>
element.
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. It's built on top of the
component, so it has access to all
TextProps
. 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 |
---|---|---|---|
cursor | Property.Cursor | sets CSS cursor property | |
disabled | boolean | ||
typeLevel | | Type token as string with level and size separated by dot. These values map to our Canvas type levels.
| 'subtext.large' |
variant | keyof | Type variant token names:
| |
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 | 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