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`	-
	Id of the element this label is describing
`children`	`React.Node`	-

Example

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

Live example

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