Input

Input allows users to enter text content.

Demo

Usage

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

First Name:

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.

Small

Default

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.

Default

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

Disabled

Readonly

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.

Username

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.

Event handlers

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.

Enter departing date ✈️

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

Enter quantity needed:

<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

Name

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:

Square field

/* styles.css */
.custom-input-class.amplify-input {
  border-radius: 0;
}

Using style props:

Name:

Special Field

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>
  );
};