Label

Labels describe the purpose of a form element in a UI

Name	Resource	Status
Figma	Design Kit (Figma)	Private

1
import { Field, Label } from '@cerberus/react'

Usage

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelBasicPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="first_name">First Name</Label>
7
      <Input id="first_name" placeholder="Type your first name" type="text" />
8
    </Field>
9
  )
10
}

Hidden

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelHiddenPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="global_search" hidden>
7
        Search anything
8
      </Label>
9
      <Input id="global_search" placeholder="Search anything" type="text" />
10
    </Field>
11
  )
12
}

Optional

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelOptionalPreview() {
4
  return (
5
    <Field>
6
      <Label htmlFor="preferred">Preferred Name</Label>
7
      <Input id="preferred" placeholder="i.e. Johnny" type="text" />
8
    </Field>
9
  )
10
}

Customizing

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelCustomPreview() {
4
  return (
5
    <Field required>
6
      <Label
7
        className={css({
8
          fontSize: '2rem',
9
          bgColor: 'black',
10
          color: 'yellow',
11
        })}
12
        htmlFor="global_search"
13
      >
14
        Killa Bees
15
      </Label>
16
      <input id="global_search" type="text" />
17
    </Field>
18
  )
19
}

API

export interface FieldProps {
  disabled?: boolean
  invalid?: boolean
  required?: boolean
  readOnly?: boolean
}

define function Field(props: PropsWithChildren<FieldProps>): ReactNode

export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
  htmlFor: string
  hidden?: boolean
  size?: 'sm' | 'md'
}

define function Label(props: LabelProps): ReactNode

Props

The LabelProps component accepts the following props:

Name	Default	Description
htmlFor	null	The `name` attribute of the Input the Label is associated with.
hidden	false	Whether the Label content should be visually hidden.
size	'md'	The size of the Label.

On this page

Use Cases

Users should be able to:
Navigate to and activate a text field with assistive technology
Input information into the text field
Receive and understand supporting text and error messages
Navigate to and select interactive icons

Interaction & Style

The containers for both filled and outlined text fields provide the same functionality. Changes to color and thickness of stroke help provide clear visual cues for interaction.

Keys	Actions
Tab	Focus lands on (non-disabled) input

Labeling Elements

If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.

The accessibility label for a textfield is typically the same as the label for the textfield.

On this page