Label Text

Label Text provides a simple way to render a label with built-in support for Canvas type tokens.

GitHubStorybook
yarn add @workday/canvas-kit-react
Sources
GitHubStorybook
Install
yarn add @workday/canvas-kit-react

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.

NameTypeDescriptionDefault
cursorProperty.Cursor

sets CSS cursor property

disabledboolean
typeLevel
  'body.medium'
   | 'body.large'
   | 'body.small'
   | 'title.medium'
   | 'title.large'
   | 'title.small'
   | 'heading.medium'
   | 'heading.large'
   | 'heading.small'
   | 'subtext.medium'
   | 'subtext.large'
   | 'subtext.small'

Type token as string with level and size separated by dot. These values map to our Canvas type levels.

<Text typeLevel="body.small">Small body text</Text>
'subtext.large'
variantkeyof

Type variant token names: error, hint or inverse.

<Text variant="error" typeLevel="subtext.large">Error text</Text>
childrenReactNode
asReact.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 React.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

label
refReact.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 as is set to an element, it will be that element. If as is a component, the reference will be to that component (or element if the component uses React.forwardRef).

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section