Label

View source on GitHub

; Opens a new tab

Use the Label component to connect a label with a form component in an accessible way.

also known as Field Label, Form Label

Figma:

Web:

iOS:

Android:

A11y:

Props

Component props
Name	Type	Default
`htmlFor` Required	`string`	-
	Unique id of the element this label is describing.
`children`	`React.Node`	-
	The content of the label, typically Text or similar.

Accessibility

Ready

Variants

Example

Whenever you are using a SelectList, Switch, TextField or TextArea component, you should use a Label.

function LabelExample() {
  const [switched, setSwitched] = React.useState(false);

  return (
    <Box>
      <Box paddingY={1}>
        <Label htmlFor="switchExample">
          <Text>Live example</Text>
        </Label>
      </Box>
      <Switch
        onChange={() => setSwitched(!switched)}
        id="switchExample"
        switched={switched}
      />
    </Box>
  );
}

function LabelExample() {
  const [switched, setSwitched] = React.useState(false);

  return (
    <Box>
      <Box paddingY={1}>
        <Label htmlFor="switchExample">
          <Text>Live example</Text>
        </Label>
      </Box>
      <Switch
        onChange={() => setSwitched(!switched)}
        id="switchExample"
        switched={switched}
      />
    </Box>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub

; Opens a new tab