Label is a themed version of the native label element that can be paired with other form components like Input, Textarea, Radio and Checkbox.

A form must always be labelled. The easiest way to label an input field is by using this component and providing an htmlFor property that matches the id of the input field being labelled.

If you are using a label for a form, check out the component. It handles errors, labels and formatting for you.

You can also refer to our form patterns for guidance on layout, proper usage and accessibility of various form elements.

<Label htmlFor='matching-id'>
  This is a label for a form element
</Label>

Properties

Recipes

<Label>
  <Icon name='globe-outline' mr={300} aria-hidden />
  This is a label for a form element
</Label>

() => {
  const [name, setName] = useState("")
  return (
  <Box>
    <Text.Byline mb={300}>*=Required</Text.Byline>
    <Label htmlFor='fullname' required>Full Name</Label>
    <Input
      id='fullname'
      name='fullname'
      required
    />
  </Box>
  )
}