Label

Label represents a caption for a UI element.

Usage

Import the Label component and pair it with a field control.

First Name:

import { Flex, Input, Label } from '@aws-amplify/ui-react';

export const DefaultLabelExample = () => (
  <Flex direction="column" gap="small">
    <Label htmlFor="first_name">First Name:</Label>
    <Input id="first_name" name="first_name" />
  </Flex>
);

Accessibility

Label is used to visually and programmatically associate a text label with a form control. Clicking on a label will highligh the associated field, and a screen reader can read the text label, allowing an accessibility technology user to understand the purpose of a form control.

Departure date

import { Flex, Input, Label } from '@aws-amplify/ui-react';

export const AccessibilityExample = () => (
  <Flex direction="column" gap="small">
    <Label htmlFor="departure">Departure date</Label>
    <Input id="departure" type="date" />
  </Flex>
);

Standard HTML attributes

The Label will accept any of the standard HTML attributes that a <label> element accepts. Standard <label> attributes can be found in the MDN Documentation

CSS Styling

Target classes

Class	Description
`amplify-label`	Class applied to the label element

No variables available for this component

Global styling

To override styling on all Input primitives, you can set the Amplify CSS variables with the built-in .amplify-input class.

Globally styled label

/* styles.css */
.amplify-input {
  font-style: italic;
}

Local styling

To override styling on a specific Input, you can use a class selector or style props.

Using a class selector:

Custom styled label

/* styles.css */
.custom-label-class.amplify-label {
  color: rebeccapurple;
}

Using style props:

Awesome label

import { Label, useTheme } from '@aws-amplify/ui-react';

export const StylePropsExample = () => {
  const { tokens } = useTheme();

  return (
    <Label fontSize={tokens.fontSizes.xl} fontStyle="italic">
      Awesome label
    </Label>
  );
};