AWS Amplify UI: 10 new and updated components

The AWS Amplify UI team is introducing eight brand new React user interface components and two improved components to help you build feature-rich apps for your end users. In this post, we’ll highlight the new components and how you can use them in a project. Amplify UI is a component library with both cloud connected cross-platform and foundational React components that are performant, themeable, responsive, and accessible.

1. Fieldset

<Fieldset
  legend="Favorite fruits"
  variation="outlined"
  direction="column">
  <CheckboxField
    label="Apple"
    name="apple"
  />
  <CheckboxField
    label="Pear"
    name="pear"
  />
</Fieldset>

Fieldset is a new component that renders a <fieldset> element accompanied by an accessible <legend>. Fieldsets are HTML elements used to group related elements in a form – for example a group of checkboxes or to create related fields within a larger form. Previously, you had to build and style your own fieldset, but with the introduction of the Fieldset component, this process is now more straightforward.

Fieldset is a context provider, so the disabled state of the fieldset can be correctly passed down to Amplify UI’s form controls and nested fieldsets. Setting the isDisabled prop to true will disable all form fields which are child elements of the Fieldset.

2. Input

<Input placeholder="placeholder" />

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. The Input primitive comes styled for text input only (type text, date, number, etc).

3. Label

  <Flex direction="column" gap="small">
    <Label htmlFor="first_name">First Name:</Label>
    <Input id="first_name" name="first_name" />
  </Flex>

Label represents a caption for a UI element. The Label component should be used together with the Input component so you can compose your own form fields. 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

4. SelectField (updated)

<SelectField
  label="Fruit"
  descriptiveText="What's your favorite fruit?"
  isMultiple={true}
>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange" disabled>Orange</option>
    <option value="pineapple">Pineapple</option>
    <option value="kiwi">Kiwi</option>
    <option value="tangerine">Tangerine</option>
</SelectField>

The SelectField now includes isMultiple and selectSize props, offering more configuration options for handling user selections.

5. Button (updated)

<Button
  variation="primary"
  colorTheme="success"
>
  Click me!
</Button>

The updated Button component now supports the colorTheme property, giving you the flexibility to incorporate more color variants. With the variation, size, and colorTheme properties, you now have 54 different styles of buttons!

6. Message

<Message
  variation="plain"
  colorTheme="neutral"
  heading="A message heading">
  Basic message content
</Message>

The Message component is the successor to our Alert component. Message is more customizable and flexible so you can use it in more situations in your application. Message does not have an ARIA role configured by default. Depending on your own use case, you can pass a role attribute or add your own ARIA attributes where needed. The Message component has a colorTheme property that increases the message color variants. The colorTheme property is similar to the button property of the same name.

7. Breadcrumbs

import { Breadcrumbs } from '@aws-amplify/ui-react';

export default function DefaultBreadcrumbsExample() {
  return (
    <Breadcrumbs
      items={[
        {
          href: '/',
          label: 'Home',
        },
        {
          href: '/react/components',
          label: 'Components',
        },
        {
          label: 'Breadcrumbs',
        },
      ]}
    />
  );
}

The Breadcrumbs component is also composable, so you can full control over what is rendered and unlock more advanced use-cases.

• <Breadcrumbs.Container>
• <Breadcrumbs.Item>
• <Breadcrumbs.Link>
• <Breadcrumbs.Separator>

You can use the Breacrumbs component with NextJS’s Link component and useRouter to automatically generate the breadcrumbs based on the current path.

import Link from 'next/link';
import { Breadcrumbs } from '@aws-amplify/ui-react';
import { useRouter } from 'next/router';

export default function NextBreadcrumbsExample() {
  const { asPath } = useRouter();

  const nestedRoutes = asPath
    .split('#')[0]
    .split('?')[0]
    .split('/')
    .filter((subpath) => subpath.length > 0);

  const breadcrumbs = [
    { href: '/', text: 'Home' },
    ...nestedRoutes.map((subpath, i) => {
      const href = '/' + nestedRoutes.slice(0, i + 1).join('/');

      const text = subpath;
      return { href, text };
    }),
  ];

  return (
    <Breadcrumbs.Container>
      {breadcrumbs.map(({ href, text }, i) => {
        const isCurrent = i === breadcrumbs.length - 1;
        return (
          <Breadcrumbs.Item key={href}>
            <Link href={href} passHref>
              <Breadcrumbs.Link isCurrent={isCurrent}>{text}</Breadcrumbs.Link>
            </Link>
            {isCurrent ? null : <Breadcrumbs.Separator />}
          </Breadcrumbs.Item>
        );
      })}
    </Breadcrumbs.Container>
  );
}

8. Dropzone

export default function DefaultDropZoneExample() {
  const [files, setFiles] = React.useState([]);
  return (
    <>
      <DropZone
        onDropComplete={({ files }) => {
          setFiles(files);
        }}
      >
        Drag images here
      </DropZone>
      {files.map((file) => (
        <Text key={file.name}>{file.name}</Text>
      ))}
    </>
  );
}

The DropZone component adds the necessary event handlers to an element and filters dropped files by file type. To get the files after they are dropped, you can use the onDropComplete prop which is a function that has files and rejectedFiles arrays.

9. IconsProvider

To customize the icons used in the Amplify UI components, wrap your application with the IconProvider component and pass in the icons you want to change. The icons prop should be an object mapping icon names to React components. For example:

import { IconsProvider, Rating } from '@aws-amplify/ui-react';
import { FiStar } from 'react-icons/fi';

export default function IconProviderExample() {
  return (
    <IconsProvider
      icons={{
        rating: {
          filled: <FiStar />,
          empty: <FiStar />,
        },
      }}
    >
      <Rating value={3.5} />
    </IconsProvider>
  );
}

The IconProvider component uses React context to make the custom icon set available to child components. Any component inside the IconProvider will have access to the custom icons via an internal hook. You can nest IconProviders in different parts of your application, just like you would with other React contexts if you wanted to change icons in a certain part of your application.

10. StorageImage

<StorageImage alt="cat" imgKey="cat.jpg" accessLevel="public" />

The StorageImage component is a new Storage connected component in the @aws-amplify/ui-react-storage package that you can use to easily display images saved in Storage.

Conclusion

With these 10 new and updated components, Amplify UI offers more flexibility and efficiency in building and enhancing your React applications. We continue to work towards providing you with the tools necessary to create accessible, customizable, and user-friendly applications with ease. If there are more components you would like to see, let us know on Github.

To learn more about these components and the rest of Amplify UI, visit the documentation.