Label

View source on GitHub

See recent changes on GitHub

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

also known as Field Label, Form Label

Figma:

N/A

Responsive:

Ready

Adaptive:

N/A

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

Variants

Label with form component

Whenever using SelectList, Switch, TextField or TextArea, you should always include a Label.

import { useId, useState } from 'react';
import { Flex, Label, Switch, Text } from 'gestalt';

export default function Example() {
  const [switched, setSwitched] = useState(false);
  const switchId = useId();

  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex direction="column" gap={2}>
        <Label htmlFor={switchId}>
          <Text>This is a Label</Text>
        </Label>

        <Switch
          id={switchId}
          onChange={() => setSwitched(!switched)}
          switched={switched}
        />
      </Flex>
    </Flex>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component responds to changing viewport sizes in web and mobile web.

Edit page on GitHub