Amplify UI


Label represents a caption for a UI element.


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

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" />


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.

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" />

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

amplify-labelClass 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.

/* 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:

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

Using style props:

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

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

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

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.