Skip to Content
Workday Design
Design SystemBrand Resources
CTRL K

Label Text

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

Interaction Modes

Editing

Selecting

Sources

Github

Storybook

Install

yarn add @workday/canvas-kit-react

Component Type

Text

Platform

Web

Component

Sana Canvas

Delivery Channels

Web, Web Mobile

Version

16.1.7

Experience Surfaces

Page Body Inline

Component Type

Text

Platform

Web

Component

Sana Canvas

Delivery Channels

Web, Web Mobile

Version

16.1.7

Experience Surfaces

Page Body Inline

Usage Guidance

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.

import React from 'react';

import {LabelText} from '@workday/canvas-kit-react/text';

export default () => <LabelText>Label</LabelText>;

Cursor

Set the cursor prop to render a particular cursor when the mouse pointer is hovering over the label.

import React from 'react';

import {LabelText} from '@workday/canvas-kit-react/text';

export default () => <LabelText cursor="pointer">Label with Pointer</LabelText>;

Disabled

Set the disabled prop to provide a visual cue that the label and its associated element are disabled.

import {LabelText} from '@workday/canvas-kit-react/text';
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const inverseBackground = createStyles({
  backgroundColor: system.color.brand.accent.primary,
  padding: system.padding.md,
  marginBlockStart: system.gap.md,
});

export default () => {
  return (
    <div>
      <LabelText disabled>Disabled Label</LabelText>
      <div className={inverseBackground}>
        <LabelText disabled variant="inverse">
          Disabled Inverse Label
        </LabelText>
      </div>
    </div>
  );
};

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.

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

Disabled state as a boolean

<LabelText disabled={true}>Error text</LabelText>
variant 'error' | 'hint' | 'inverse'

Type variant token names: error, hint or inverse.

<LabelText variant="error">Error text</LabelText>
cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)
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).