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

also known as Field Label, Form Label

Figma:

Responsive:

Adaptive:

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.