Amplify UI

Input

Input allows users to enter text content.

Demo

Usage

Import the Input component and styles and connect a Label for accessibility/usability.

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

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

Sizes

Input sizes are designed to match styling of other field components such as Buttons. There are three sizes: small, (default), and large.

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

export const InputSizeExample = () => {
  return (
    <Flex direction="column">
      <Flex direction="column" gap="small">
        <Label htmlFor="small">Small</Label>
        <Input id="small" size="small" width="50%" />
      </Flex>

      <Flex direction="column" gap="small">
        <Label htmlFor="default">Default</Label>
        <Input id="default" width="75%" />
      </Flex>

      <Flex direction="column" gap="small">
        <Label htmlFor="large">Large</Label>
        <Input id="large" size="large" width="100%" />
      </Flex>
    </Flex>
  );
};

Variations

There are two variation styles available: default and quiet.

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

export const InputVariationExample = () => {
  return (
    <Flex direction="column">
      <Flex direction="column" gap="small">
        <Label htmlFor="Default">Default</Label>
        <Input id="default" />
      </Flex>
      <Flex direction="column" gap="small">
        <Label htmlFor="Quiet">Quiet</Label>
        <Input id="quiet" variation="quiet" />
      </Flex>
    </Flex>
  );
};

States

The available Input states include isDisabled and isReadOnly. A disabled field will be not be focusable, is not mutable, and will not be submitted with form data. A readonly field cannot be edited by the user.

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

export const InputStatesExample = () => {
  return (
    <Flex direction="column">
      <Flex direction="column" gap="small">
        <Label htmlFor="disabled">Disabled</Label>
        <Input id="disabled" defaultValue="Disabled" isDisabled />
      </Flex>
      <Flex direction="column" gap="small">
        <Label htmlFor="readonly">Readonly</Label>
        <Input id="readonly" defaultValue="You can't edit me!" isReadOnly />
      </Flex>
    </Flex>
  );
};

Required fields

Use the isRequired prop to specify a required field.

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

export const DefaultRequiredInputExample = () => {
  return (
    <Flex as="form" direction="column" width="20rem">
      <Flex direction="column" gap="small">
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" isRequired />
      </Flex>
      <Button type="submit">Submit</Button>
    </Flex>
  );
};

There is no default styling for required fields. Customize the label to instruct the form user of the required field.

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

export const RequiredInputExample = () => {
  return (
    <Flex as="form" direction="column" width="100%">
      <Flex direction="column" gap="small">
        <Label htmlFor="email">
          Email
          <Text as="span" fontSize="small" color="font.error">
            {' '}
            (required)
          </Text>
        </Label>
        <Input id="email" name="email" type="email" isRequired={true} />
      </Flex>
      <Button type="submit">Submit</Button>
    </Flex>
  );
};

Validation error styling

Use the hasError prop to mark an Input as having a validation error.

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

export const InputValidationErrorExample = () => {
  const [hasError, setHasError] = React.useState(true);

  const validateUsername = (e) => {
    const containsDigit = /\d/.test(e.currentTarget.value);
    setHasError(!containsDigit);
  };

  return (
    <Flex direction="column" gap="small">
      <Label htmlFor="username">Username</Label>
      <Input id="username" hasError={hasError} onChange={validateUsername} />
    </Flex>
  );
};

Event handlers

Input provides several event handlers: onSelect, onInput, onChange, onCopy, onPaste, and onCut. Open the console to interact with the demo below.

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

export const InputEventHandlersExample = () => (
  <Flex direction="column" gap="small">
    <Label htmlFor="events">Event handlers</Label>
    <Input
      id="events"
      onSelect={(e) => console.info('onSelect fired:', e.currentTarget.value)}
      onInput={(e) => console.info('onInput fired:', e.currentTarget.value)}
      onChange={(e) => console.info('onChange fired:', e.currentTarget.value)}
      onCopy={(e) => console.info('onCopy fired:', e.currentTarget.value)}
      onPaste={(e) => console.info('onPaste fired:', e.currentTarget.value)}
      onCut={(e) => console.info('onCut fired:', e.currentTarget.value)}
    />
  </Flex>
);

Standard HTML attributes

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

Input Types

Input primitive comes styled for text input only (type text, date, number, etc). For text component combining Input and Label, see TextField. For other input types, see TextAreaField, CheckBoxField, and SelectField.

<Flex direction="column" gap="small">
  <Label htmlFor="departing">Enter departing date ✈️</Label>
  <Input
    id="departing"
    type="date"
  />
</Flex>
<Flex direction="column" gap="small">
  <Label htmlFor="quantity">Enter quantity needed: </Label>
  <Input
    id="quantity"
    type="number"
  />
</Flex>

Styling

Theme

You can customize the appearance of all Input components in your application with a Theme.

Input Theme Source

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

const theme: Theme = {
  name: 'input-theme',
  tokens: {
    components: {
      input: {
        color: { value: '{colors.blue.90}' },
        _focus: {
          borderColor: { value: '{colors.blue.40}' },
        },
      },
    },
  },
};

export const InputThemeExample = () => (
  <ThemeProvider theme={theme} colorMode="light">
    <Flex direction="column" gap="small">
      <Label htmlFor="name">Name</Label>
      <Input id="name" />
    </Flex>
  </ThemeProvider>
);

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 {
  --amplify-components-input-border-color: rebeccapurple;
}

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-input-class.amplify-input {
  border-radius: 0;
}

Using style props:

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

export const InputStylePropsExample = () => {
  const { tokens } = useTheme();
  return (
    <Flex direction="column">
      <Flex direction="column" gap="small">
        <Label htmlFor="name">
          <Text
            fontWeight={tokens.fontWeights.bold}
            fontSize={tokens.fontSizes.xl}
          >
            Name:
          </Text>
        </Label>
        <Input
          id="name"
          fontWeight={tokens.fontWeights.bold}
          fontSize={tokens.fontSizes.xl}
          padding="xl"
          border={`1px solid ${tokens.colors.primary[60]}`}
        />
      </Flex>

      <Flex direction="column" gap="small">
        <Label htmlFor="special">Special Field</Label>
        <Input
          id="special"
          backgroundColor="primary.10"
          border={`1px solid ${tokens.colors.primary[60]}`}
        />
      </Flex>
    </Flex>
  );
};

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.