Label

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

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.

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>
  );
}

Edit page on GitHub