### Complete Form Example with AWS UI Components

Source: https://context7.com/aws/awsui-documentation/llms.txt

This example demonstrates a full form implementation using various AWS UI components like AppLayout, Form, FormField, Input, and Select. It includes state management for form inputs and basic validation. Ensure you have the necessary AWS UI component packages installed.

```tsx
import "@awsui/global-styles/index.css";
import AppLayout from "@awsui/components-react/app-layout";
import Form from "@awsui/components-react/form";
import FormField from "@awsui/components-react/form-field";
import Input from "@awsui/components-react/input";
import Select, { SelectProps } from "@awsui/components-react/select";
import Container from "@awsui/components-react/container";
import Header from "@awsui/components-react/header";
import SpaceBetween from "@awsui/components-react/space-between";
import Button from "@awsui/components-react/button";
import { useState } from "react";

const REGION_OPTIONS: SelectProps.Options = [
  { label: "US East (N. Virginia)",  value: "us-east-1" },
  { label: "US West (Oregon)",       value: "us-west-2" },
  { label: "EU (Ireland)",           value: "eu-west-1" },
];

export default function LaunchInstancePage() {
  const [name, setName] = useState("");
  const [region, setRegion] = useState<SelectProps.Option | null>(null);
  const [submitted, setSubmitted] = useState(false);

  const nameError    = submitted && !name    ? "Instance name is required."  : "";
  const regionError  = submitted && !region  ? "Please select a region."     : "";

  function handleSubmit() {
    setSubmitted(true);
    if (!name || !region) return;
    console.log("Launching:", { name, region: region.value });
  }

  return (
    <AppLayout
      contentType="form"
      navigationHide
      toolsHide
      content={
        <Form
          header={
            <Header variant="h1" description="Configure and launch a new EC2 instance.">
              Launch instance
            </Header>
          }
          actions={
            <SpaceBetween direction="horizontal" size="xs">
              <Button variant="link">Cancel</Button>
              <Button variant="primary" onClick={handleSubmit}>
                Launch instance
              </Button>
            </SpaceBetween>
          }
        >
          <Container header={<Header variant="h2">Instance configuration</Header>}>
            <SpaceBetween direction="vertical" size="l">
              <FormField
                label="Instance name"
                description="A friendly name to identify your instance."
                constraintText="Maximum 255 characters."
                errorText={nameError}
              >
                <Input
                  value={name}
                  onChange={({ detail }) => setName(detail.value)}
                  placeholder="e.g. my-web-server"
                />
              </FormField>

              <FormField label="AWS Region" errorText={regionError}>
                <Select
                  selectedOption={region}
                  onChange={({ detail }) => setRegion(detail.selectedOption)}
                  options={REGION_OPTIONS}
                  placeholder="Select a region"
                  selectedAriaLabel="Selected region"
                  filteringType="auto"
                />
              </FormField>
            </SpaceBetween>
          </Container>
        </Form>
      }
    />
  );
}

```

--------------------------------

### Install AWS UI React Components

Source: https://github.com/aws/awsui-documentation/blob/main/README.md

Install the AWS UI React components package using npm.

```bash
npm install @awsui/components-react
```

--------------------------------

### Install AWS-UI Components and Global Styles

Source: https://context7.com/aws/awsui-documentation/llms.txt

Install the core AWS-UI components and global styles packages using npm. This is a prerequisite for using any AWS-UI components.

```bash
npm install @awsui/components-react @awsui/global-styles
```

--------------------------------

### Custom Preference Example

Source: https://github.com/aws/awsui-documentation/blob/main/components/collection-preferences.md

Example of how to configure and render a custom preference using a Checkbox. The custom preference state is managed via `customValue` and `setCustomValue`.

```jsx
(customValue, setCustomValue) => (
  <Checkbox checked={customValue} onChange={({ detail }) => setCustomValue(detail.checked)} />
)
```

--------------------------------

### AWS-UI AppLayout Component Example

Source: https://context7.com/aws/awsui-documentation/llms.txt

Example demonstrating the AWS-UI AppLayout component, which provides the foundational page shell. It includes navigation, tools, notifications, breadcrumbs, and main content areas. Configure navigation and tools panel states using `navigationOpen`, `onNavigationChange`, `toolsOpen`, and `onToolsChange`.

```tsx
import AppLayout from "@awsui/components-react/app-layout";
import SideNavigation from "@awsui/components-react/side-navigation";
import HelpPanel from "@awsui/components-react/help-panel";
import Flashbar from "@awsui/components-react/flashbar";
import BreadcrumbGroup from "@awsui/components-react/breadcrumb-group";
import { useState } from "react";

function MyPage() {
  const [navOpen, setNavOpen] = useState(true);
  const [toolsOpen, setToolsOpen] = useState(false);

  return (
    <AppLayout
      contentType="table"
      navigationOpen={navOpen}
      onNavigationChange={({ detail }) => setNavOpen(detail.open)}
      toolsOpen={toolsOpen}
      onToolsChange={({ detail }) => setToolsOpen(detail.open)}
      ariaLabels={{
        navigation: "Navigation drawer",
        navigationClose: "Close navigation drawer",
        navigationToggle: "Open navigation drawer",
        notifications: "Notifications",
        tools: "Help panel",
        toolsClose: "Close help panel",
        toolsToggle: "Open help panel",
      }}
      navigation={
        <SideNavigation
          activeHref="/instances"
          header={{ text: "My Service", href: "/" }}
          items={[
            { type: "link", text: "Instances", href: "/instances" },
            { type: "link", text: "Settings", href: "/settings" },
          ]}
        />
      }
      tools={<HelpPanel header={<h2>Help</h2>}>Contextual help content here.</HelpPanel>}
      notifications={
        <Flashbar
          items={[{ type: "success", content: "Resource created successfully.", dismissible: true, onDismiss: () => {} }]} 
        />
      }
      breadcrumbs={
        <BreadcrumbGroup
          items={[
            { text: "Home", href: "/" },
            { text: "Instances", href: "/instances" },
          ]}
        />
      }
      content={<div>Main page content goes here</div>}
    />
  );
}

```

--------------------------------

### Install AWS UI Global Styles Package

Source: https://github.com/aws/awsui-documentation/blob/main/README.md

Install the AWS UI Global Styles package using npm. This package includes global styles, Noto Sans font, and base font sizes required for AWS UI components.

```bash
npm install @awsui/global-styles
```

--------------------------------

### startOfWeek

Source: https://github.com/aws/awsui-documentation/blob/main/components/date-range-picker.md

Sets the starting day of the week, where 0-6 maps to Sunday-Saturday. Overrides the locale's default.

```APIDOC
## startOfWeek

### Description
Starting day of the week. [0-6] maps to [Sunday-Saturday].
By default the starting day of the week is defined by the locale,
but you can override it using this property.

### Type
Number

### Required
No
```

--------------------------------

### Import Button Component

Source: https://github.com/aws/awsui-documentation/blob/main/README.md

Example of importing the Button component from AWS UI React. Use this for specific component imports.

```javascript
import Button from "@awsui/components-react/button"
```

--------------------------------

### Use Button Component

Source: https://github.com/aws/awsui-documentation/blob/main/README.md

Example of using the imported Button component in your React application.

```jsx
<Button>Hello!</Button>
```

--------------------------------

### Card Definition Example

Source: https://github.com/aws/awsui-documentation/blob/main/components/cards.md

Defines the structure and content of individual cards, including headers and sections. Use this to customize card appearance and data display.

```typescript
{
  sections?: ReadonlyArray<
    CardsProps.SectionDefinition<T>
  >
  header?: (item: T) => React.ReactNode
}
```

--------------------------------

### AppLayout ariaLabels Example

Source: https://github.com/aws/awsui-documentation/blob/main/components/app-layout.md

Use the ariaLabels property to ensure accessibility by providing descriptive labels for the navigation and tools drawer operating buttons and landmarks.

```typescript
{
  navigation: "Navigation drawer",
  navigationClose: "Close navigation drawer",
  navigationToggle: "Open navigation drawer",
  notifications: "Notifications",
  tools: "Help panel",
  toolsClose: "Close help panel",
  toolsToggle: "Open help panel"
}
```

--------------------------------

### Wizard Steps

Source: https://github.com/aws/awsui-documentation/blob/main/components/wizard.md

Defines the structure for each step within the wizard. Each step can include a title, optional info and description, main content, error text, and an indicator for whether it's optional.

```APIDOC
## Wizard Steps

### Description
An array of step objects, each representing a distinct stage in the wizard.

### Properties
- `title` (string) - Required - Text displayed as the title in the navigation pane and form header.
- `info` (ReactNode) - Optional - Area for a page-level info link displayed in the form header, triggering default help panel content.
- `description` (ReactNode) - Optional - Text below the form header providing further explanation of the step's purpose or actions.
- `content` (ReactNode) - Required - The main content area for form sections, fields, and controls.
- `errorText` (ReactNode) - Optional - Error text displayed in a page-level alert for actionable server-side validation failures.
- `isOptional` (boolean) - Optional - If true, indicates the step is optional and displays `i18nStrings.optional` text next to the title.
```

--------------------------------

### Full-Page Table with Filtering and Pagination

Source: https://context7.com/aws/awsui-documentation/llms.txt

Demonstrates a complete Table implementation with multi-selection, server-side sorting, resizable columns, sticky headers, and integrated filtering and pagination. Requires column definitions and items.

```tsx
import Table, { TableProps } from "@awsui/components-react/table";
import Header from "@awsui/components-react/header";
import Button from "@awsui/components-react/button";
import TextFilter from "@awsui/components-react/text-filter";
import Pagination from "@awsui/components-react/pagination";
import { useState } from "react";

interface Instance { id: string; name: string; state: string; type: string; }

const COLUMN_DEFS: TableProps.ColumnDefinition<Instance>[] = [
  { id: "id",    header: "Instance ID", cell: (i) => i.id,    sortingField: "id",    width: 180 },
  { id: "name",  header: "Name",        cell: (i) => i.name,  sortingField: "name" },
  { id: "type",  header: "Type",        cell: (i) => i.type,  sortingField: "type",  width: 120 },
  { id: "state", header: "State",       cell: (i) => i.state, sortingField: "state", width: 100 },
];

function InstanceTable({ instances }: { instances: Instance[] }) {
  const [selectedItems, setSelectedItems] = useState<Instance[]>([]);
  const [filterText, setFilterText] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const PAGE_SIZE = 20;

  const filtered = instances.filter((i) =>
    i.name.toLowerCase().includes(filterText.toLowerCase())
  );
  const pageItems = filtered.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);

  return (
    <Table
      columnDefinitions={COLUMN_DEFS}
      items={pageItems}
      selectionType="multi"
      selectedItems={selectedItems}
      onSelectionChange={({ detail }) => setSelectedItems(detail.selectedItems)}
      trackBy="id"
      stickyHeader
      resizableColumns
      variant="full-page"
      ariaLabels={{
        selectionGroupLabel: "Instances selection",
        allItemsSelectionLabel: ({ selectedItems }) =>
          `${selectedItems.length} ${selectedItems.length === 1 ? "instance" : "instances"} selected`,
        itemSelectionLabel: ({ selectedItems }, item) =>
          `${item.name} is ${selectedItems.find((s) => s.id === item.id) ? "" : "not "}selected`,
      }}
      header={
        <Header
          variant="awsui-h1-sticky"
          counter={`(${instances.length})`}
          actions={
            <SpaceBetween direction="horizontal" size="xs">
              <Button disabled={selectedItems.length === 0}>Delete</Button>
              <Button variant="primary">Launch instance</Button>
            </SpaceBetween>
          }
        >
          Instances
        </Header>
      }
      filter={
        <TextFilter
          filteringText={filterText}
          filteringPlaceholder="Find instances"
          filteringAriaLabel="Filter instances"
          onChange={({ detail }) => { setFilterText(detail.filteringText); setCurrentPage(1); }}
          countText={`${filtered.length} match${filtered.length !== 1 ? "es" : ""}`}
        />
      }
      pagination={
        <Pagination
          currentPageIndex={currentPage}
          pagesCount={Math.ceil(filtered.length / PAGE_SIZE)}
          onChange={({ detail }) => setCurrentPage(detail.currentPageIndex)}
          ariaLabels={{
            nextPageLabel: "Next page",
            previousPageLabel: "Previous page",
            pageLabel: (n) => `Page ${n}`,
          }}
        />
      }
      empty={
        <Box textAlign="center" color="inherit">
          <b>No instances</b>
          <Box padding={{ bottom: "s" }} color="inherit">
            No instances match your filter.
          </Box>
          <Button onClick={() => setFilterText("")}>Clear filter</Button>
        </Box>
      }
    />
  );
}

```

--------------------------------

### Tutorial Detail for onExitTutorial Event

Source: https://github.com/aws/awsui-documentation/blob/main/components/annotation-context.md

The detail object for the onExitTutorial event contains the tutorial object that was active.

```typescript
TutorialPanelProps.TutorialDetail {
  tutorial: TutorialPanelProps.Tutorial
}
```

--------------------------------

### Import Button Component (Alternative)

Source: https://github.com/aws/awsui-documentation/blob/main/README.md

Alternative method to import the Button component. This might lead to a larger bundle size compared to specific imports.

```javascript
import { Button } from "@awsui/components-react"
```

--------------------------------

### onFocus

Source: https://github.com/aws/awsui-documentation/blob/main/components/date-range-picker.md

Fired when keyboard focus is set onto the UI control.

```APIDOC
## onFocus

### Description
Fired when keyboard focus is set onto the UI control.

### Detail type
```
Null
```

### Cancelable
No
```

--------------------------------

### locale

Source: https://github.com/aws/awsui-documentation/blob/main/components/date-range-picker.md

The locale to be used for rendering month names and defining the starting date of the week. Supported values and formats are as-per the JavaScript Intl API specification.

```APIDOC
## locale

### Description
The locale to be used for rendering month names and defining the starting date of the week. If not provided, it will be determined from the page and browser locales. Supported values and formats are as-per the [JavaScript Intl API specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).

### Type
String

### Default
`''`

### Required
No
```

--------------------------------

### App Layout Ref Functions

Source: https://github.com/aws/awsui-documentation/blob/main/components/app-layout.md

Provides reference functions to programmatically control the App Layout component, such as closing the navigation drawer or opening the tools panel.

```APIDOC
## Ref functions

### closeNavigationIfNecessary

Manually closes the navigation drawer if it is necessary for the current viewport size.

### openTools

Opens the tools panel if it is not already open. Note that it is preferable to control the state by listening to `toolsChange` and providing `toolsOpen`.
```

--------------------------------

### Input Ref Functions

Source: https://github.com/aws/awsui-documentation/blob/main/components/input.md

Available imperative functions for interacting with the Input component.

```APIDOC
## Ref functions

### focus

> Sets input focus onto the UI control.


### select

> Selects all text in the input control.
```

--------------------------------

### focus

Source: https://github.com/aws/awsui-documentation/blob/main/components/date-range-picker.md

Sets the browser focus on the UI control.

```APIDOC
## focus

### Description
Sets the browser focus on the UI control
```

--------------------------------

### Use Input for Search with Keyboard Shortcuts

Source: https://context7.com/aws/awsui-documentation/llms.txt

A single-line text input for search queries. Supports 'Enter' to perform search and 'Escape' to clear input and focus.

```tsx
import Input from "@awsui/components-react/input";
import { useState, useRef } from "react";

function SearchBar() {
  const [query, setQuery] = useState("");
  const inputRef = useRef<InputProps.Ref>(null);

  return (
    <Input
      ref={inputRef}
      type="search"
      value={query}
      onChange={({ detail }) => setQuery(detail.value)}
      onKeyDown={({ detail }) => {
        if (detail.key === "Enter") performSearch(query);
        if (detail.key === "Escape") {
          setQuery("");
          inputRef.current?.focus();
        }
      }}
      placeholder="Search instances..."
      autoFocus
      clearAriaLabel="Clear search"
    />
  );
}

// Number input with step
<Input
  type="number"
  value={String(count)}
  onChange={({ detail }) => setCount(Number(detail.value))}
  step={1}
/>
```

--------------------------------

### Page Size Preference Configuration

Source: https://github.com/aws/awsui-documentation/blob/main/components/collection-preferences.md

Defines the structure for configuring the page size selection preference, including a title and an array of options with values and labels.

```typescript
CollectionPreferencesProps.PageSizePreference {
  options: ReadonlyArray<CollectionPreferencesProps.PageSizeOption>
  title: string
}
```

--------------------------------

### onHighlightChange

Source: https://github.com/aws/awsui-documentation/blob/main/components/mixed-line-bar-chart.md

Callback function invoked when the highlighted series changes due to user interaction.

```APIDOC
### onHighlightChange

Called when the highlighted series has changed because of user interaction.

Detail type: 
```
CartesianChartProps.HighlightChangeDetail {
  highlightedSeries: Series | null
}
```

Cancelable: No
```

--------------------------------

### Date Picker Ref Functions

Source: https://github.com/aws/awsui-documentation/blob/main/components/date-picker.md

Reference functions available for programmatic control of the Date Picker.

```APIDOC
## Ref functions

### focus

*   **Description**: Sets the browser focus on the UI control
```

--------------------------------

### relativeOptions

Source: https://github.com/aws/awsui-documentation/blob/main/components/date-range-picker.md

A list of relative time ranges that are shown as suggestions.

```APIDOC
## relativeOptions

### Description
A list of relative time ranges that are shown as suggestions.

### Type
ReadonlyArray<DateRangePickerProps.RelativeOption>

### Default
`[]`

### Required
Yes
```

--------------------------------

### Pie Chart Properties

Source: https://github.com/aws/awsui-documentation/blob/main/components/pie-chart.md

Configuration options for the Pie Chart component.

```APIDOC
## Pie Chart Properties

### innerMetricDescription

> Additional description that's displayed in the center of the chart below `innerMetricValue` if `variant` is set to `donut`.
> This is usually the unit of the `innerMetricValue`.

Type: String
Required: No

### innerMetricValue

> Additional metric number that's displayed in the center of the chart if `variant` is set to `donut`.

Type: String
Required: No

### legendTitle

> Title for the legend.

Type: String
Required: No

### loadingText

> Text that's displayed when the chart is loading (that is, when `statusType` is set to `loading`).

Type: String
Required: No

### recoveryText

> Text for the recovery button that's displayed next to the error text.

Type: String
Required: No

### segmentDescription

> A function that determines the description of a segment that is displayed on the chart, unless `hideDescriptions` is set to `true`.
> This is an optional description that explains the segment and is displayed underneath the label.
> The function is called with the data object of each segment and is expected to return the description as a string.

Type: 
```
 ( segment: T, visibleDataSum: number ) => string
```

Required: No

### size

> Specifies the size of the pie or donut chart.

Type: String
Default: "medium"
Valid values: `small | medium | large`
Required: No

### statusType

> Specifies the current status of loading data.
> * `loading` - Indicates that data fetching is in progress.
> * `finished` - Indicates that data has loaded successfully.
> * `error` - Indicates that an error occurred during fetch. You should provide an option to enable the user to recover.

Type: String
Default: "finished"
Valid values: `loading | finished | error`
Required: No

### variant

> Visual variant of the pie chart. Currently supports the default `pie` variant and the `donut` variant.
> The donut variant provides a slot in the center of the chart that can contain additional information.
> For more information, see `innerContent`.

Type: String
Default: "pie"
Valid values: `pie | donut`
Required: No

### visibleSegments

> An array of data segment objects that determines which data segments are currently visible (that is, not filtered out).
> - If you don't set this property, segments are filtered automatically when using the default filtering of the component (that is, uncontrolled behavior).
> - If you explicitly set this property, you must set an `onFilterChange` listener to update this property when the list of filtered segments changes (that is, controlled behavior).
> 

Type: ReadonlyArray<T>
Required: No
```

--------------------------------

### Date Picker Properties

Source: https://github.com/aws/awsui-documentation/blob/main/components/date-picker.md

Configuration options for the Date Picker component.

```APIDOC
## Date Picker Properties

### openCalendarAriaLabel

*   **Description**: Specifies a function that generates the `aria-label` for the 'open calendar' button. The `selectedDate` parameter is a human-readable localised string representing the current value of the input.
*   **Type**: `(selectedDate: null | string) => string`
*   **Required**: No

### placeholder

*   **Description**: Specifies the placeholder text rendered when the value is an empty string.
*   **Type**: `String`
*   **Default**: `''`
*   **Required**: No

### previousMonthAriaLabel

*   **Description**: Specifies an `aria-label` for the 'previous month' button.
*   **Type**: `String`
*   **Required**: Yes

### readOnly

*   **Description**: Specifies if the control is read only, which prevents the user from modifying the value but includes it in a form submission. A read-only control can receive focus. Do not use read-only inputs outside of a form.
*   **Type**: `Boolean`
*   **Default**: `false`
*   **Valid values**: `true | false`
*   **Required**: No

### startOfWeek

*   **Description**: Determines the starting day of the week. The values 0-6 map to Sunday-Saturday. By default the starting day of the week is defined by the locale, but you can use this property to override it.
*   **Type**: `Number`
*   **Required**: No

### todayAriaLabel

*   **Description**: Used as part of the `aria-label` for today's date in the calendar.
*   **Type**: `String`
*   **Required**: Yes

### value

*   **Description**: The current input value, in YYYY-MM-DD format.
*   **Type**: `String`
*   **Default**: `''`
*   **Required**: Yes
```

--------------------------------

### Standard and Lazy Pagination

Source: https://context7.com/aws/awsui-documentation/llms.txt

Standard pagination requires total item count and page size. Open-end pagination is for server-side lazy loading where the total count is unknown.

```tsx
import Pagination from "@awsui/components-react/pagination";
import { useState } from "react";

// Standard pagination
function MyPagination({ total, pageSize }: { total: number; pageSize: number }) {
  const [page, setPage] = useState(1);

  return (
    <Pagination
      currentPageIndex={page}
      pagesCount={Math.ceil(total / pageSize)}
      onChange={({ detail }) => setPage(detail.currentPageIndex)}
      ariaLabels={{
        nextPageLabel: "Next page",
        previousPageLabel: "Previous page",
        pageLabel: (n) => `Go to page ${n}`,
      }}
    />
  );
}

// Open-end pagination for server-side lazy loading
function LazyPagination({ page, setPage }: { page: number; setPage: (n: number) => void }) {
  return (
    <Pagination
      currentPageIndex={page}
      pagesCount={page + 1}
      openEnd
      onChange={({ detail }) => setPage(detail.currentPageIndex)}
      onNextPageClick={({ detail }) => {
        if (!detail.requestedPageAvailable) {
          console.log("No more results");
        }
      }}
      ariaLabels={{ nextPageLabel: "Next", previousPageLabel: "Previous", pageLabel: (n) => `Page ${n}` }}
    />
  );
}
```

--------------------------------

### focus Ref Function

Source: https://github.com/aws/awsui-documentation/blob/main/components/button.md

Focuses the underlying native button.

```APIDOC
## focus

### Description
Focuses the underlying native button.
```

--------------------------------

### Input Events

Source: https://github.com/aws/awsui-documentation/blob/main/components/input.md

Information about the events that the Input component can emit.

```APIDOC
## Events

### onBlur

> Called when input focus is removed from the UI control.

Detail type: 
```
Null
```

Cancelable: No


### onChange

> Called whenever a user changes the input value (by typing or pasting).
> The event `detail` contains the current value of the field.

Detail type: 
```
InputProps.ChangeDetail {
  value: string
}
```

Cancelable: No


### onFocus

> Called when input focus is moved to the UI control.

Detail type: 
```
Null
```

Cancelable: No


### onKeyDown

> Called when the underlying native textarea emits a `keydown` event.
> The event `detail` contains the `keyCode` and information
> about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).

Detail type: 
```
InputProps.KeyDetail {
  altKey: boolean
  ctrlKey: boolean
  key: string
  keyCode: number
  metaKey: boolean
  shiftKey: boolean
}
```

Cancelable: Yes


### onKeyUp

> Called when the underlying native textarea emits a `keyup` event.
> The event `detail` contains the `keyCode` and information
> about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).

Detail type: 
```
InputProps.KeyDetail {
  altKey: boolean
  ctrlKey: boolean
  key: string
  keyCode: number
  metaKey: boolean
  shiftKey: boolean
}
```

Cancelable: Yes
```

--------------------------------

### Cards Layout Configuration

Source: https://github.com/aws/awsui-documentation/blob/main/components/cards.md

Defines the number of cards to display per row based on container width. Use this to create responsive card layouts.

```typescript
[
  {
    cards: 1
  }, {
    minWidth: 500,
    cards: 2
  }, {
    minWidth: 800,
    cards: 3
  }
]
```

--------------------------------

### Render a Confirmation Modal

Source: https://context7.com/aws/awsui-documentation/llms.txt

Use this snippet to create a modal for confirming destructive actions like deletion. It controls visibility and loading states, and handles dismissal events.

```tsx
import Modal from "@awsui/components-react/modal";
import Button from "@awsui/components-react/button";
import SpaceBetween from "@awsui/components-react/space-between";
import Box from "@awsui/components-react/box";
import { useState } from "react";

function DeleteConfirmModal({ instanceId }: { instanceId: string }) {
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  async function handleDelete() {
    setLoading(true);
    await deleteInstance(instanceId);
    setLoading(false);
    setVisible(false);
  }

  return (
    <>
      <Button onClick={() => setVisible(true)}>Delete instance</Button>
      <Modal
        visible={visible}
        onDismiss={({ detail }) => {
          if (detail.reason !== "overlay") setVisible(false);
        }}
        header="Delete instance"
        size="medium"
        closeAriaLabel="Close modal"
        footer={
          <Box float="right">
            <SpaceBetween direction="horizontal" size="xs">
              <Button variant="link" onClick={() => setVisible(false)}>
                Cancel
              </Button>
              <Button variant="primary" loading={loading} onClick={handleDelete}>
                Delete
              </Button>
            </SpaceBetween>
          </Box>
        }
      >
        Permanently delete instance <strong>{instanceId}</strong>? This action cannot be undone.
      </Modal>
    </>
  );
}

```

--------------------------------

### placeholder

Source: https://github.com/aws/awsui-documentation/blob/main/components/date-range-picker.md

Specifies the placeholder text that is rendered when the value is empty.

```APIDOC
## placeholder

### Description
Specifies the placeholder text that is rendered when the value is empty.

### Type
String

### Required
No
```

--------------------------------

### S3 Resource Selector Ref Functions

Source: https://github.com/aws/awsui-documentation/blob/main/components/s3-resource-selector.md

Reference functions available for the S3 Resource Selector component.

```APIDOC
## Ref functions

### focus

Focuses the S3 URI input field
```

--------------------------------

### Visible Content Preference Configuration

Source: https://github.com/aws/awsui-documentation/blob/main/components/collection-preferences.md

Defines the structure for configuring the visible content selection preference, including a title and an array of option groups. Each option group has a label and an array of options with IDs, labels, and an optional editable flag.

```typescript
CollectionPreferencesProps.VisibleContentPreference {
  options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOptionsGroup>
  title: string
}
```

--------------------------------

### Toggle Properties

Source: https://github.com/aws/awsui-documentation/blob/main/components/toggle.md

Configurable properties for the Toggle component.

```APIDOC
## Toggle Properties

### ariaDescribedby

Adds `aria-describedby` to the component. If you're using this component within a form field, don't set this property because the form field component automatically sets it. Use this property if the component isn't surrounded by a form field, or you want to override the value automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description and set the property to a string of each ID separated by spaces (for example, `"id1 id2 id3"`).

Type: String
Required: No

### ariaLabel

Adds an `aria-label` to the native control. Use this if you don't have a visible label for this control.

Type: String
Required: No

### ariaLabelledby

Adds `aria-labelledby` to the component. If you're using this component within a form field, don't set this property because the form field component automatically sets it. Use this property if the component isn't surrounded by a form field, or you want to override the value automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.

Type: String
Required: No

### checked

Specifies if the component is selected.

Type: Boolean
Default: `false`
Valid values: `true | false`
Required: Yes

### className

Adds the specified classes to the root element of the component.

Type: String
Required: No

### controlId

Specifies the ID of the native form element. You can use it to relate a label element's `for` attribute to this control. It defaults to an automatically generated ID that is provided by its parent form field component.

Type: String
Required: No

### disabled

Specifies if the control is disabled, which prevents the user from modifying the value and prevents the value from being included in a form submission. A disabled control can't receive focus.

Type: Boolean
Default: `false`
Valid values: `true | false`
Required: No

### id

Adds the specified ID to the root element of the component.

Type: String
Required: No

### name

Specifies the name of the control used in HTML forms.

Type: String
Required: No
```

--------------------------------

### Import Global Styles in React Application

Source: https://context7.com/aws/awsui-documentation/llms.txt

Import the global styles once at the application's entry point (e.g., main.tsx) to apply Noto Sans typography and base font sizes.

```tsx
// main.tsx — import global styles once at the application entry point
import "@awsui/global-styles/index.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

--------------------------------

### Input Attributes

Source: https://github.com/aws/awsui-documentation/blob/main/components/input.md

Details about the configurable attributes for the Input component.

```APIDOC
## Input Attributes

### step

> The step attribute is a number that specifies the granularity that the value
> must adhere to or the keyword "any". It is valid for the numeric input types,
> including the date, month, week, time, datetime-local, number and range types.

Type: InputProps.Step

Valid values: `number | any`

Required: No


### type

> Specifies the type of control to render.
> Inputs with a `number` type use the native element behavior, which might
> be slightly different across browsers.

Type: String

Default: `'text'`

Valid values: `text | password | search | number | email | url`

Required: No


### value

> Specifies the text entered into the form element.

Type: String

Required: Yes
```

--------------------------------

### Event Handlers

Source: https://github.com/aws/awsui-documentation/blob/main/components/time-input.md

These are the event handlers available for the Time Input component.

```APIDOC
## onBlur

### Description
Called when input focus is removed from the UI control.

### Detail Type
Null

### Cancelable
No
```

```APIDOC
## onChange

### Description
Called whenever a user changes the input value (by typing or pasting). The event `detail` contains the current value of the field.

### Detail Type
InputProps.ChangeDetail {
  value: string
}

### Cancelable
No
```

```APIDOC
## onFocus

### Description
Called when input focus is moved to the UI control.

### Detail Type
Null

### Cancelable
No
```

--------------------------------

### Import Global Styles

Source: https://github.com/aws/awsui-documentation/blob/main/README.md

Add this import to your application's main component or page to include global styles for AWS UI.

```javascript
import "@awsui/global-styles/index.css"
```

--------------------------------

### Icon Component Properties

Source: https://github.com/aws/awsui-documentation/blob/main/components/icon.md

This snippet details the properties available for the Icon component, including `alt`, `className`, `id`, `name`, `size`, `url`, and `variant`.

```APIDOC
## Icon Component Properties

### alt

Specifies alternate text for a custom icon. Recommended for accessibility. Ignored if using a predefined icon or the `svg` slot.

- **Type**: String
- **Required**: No

### className

Adds specified classes to the root element.

- **Type**: String
- **Required**: No

### id

Adds the specified ID to the root element.

- **Type**: String
- **Required**: No

### name

Specifies the icon to be displayed. See valid values in the source documentation.

- **Type**: String
- **Required**: No

### size

Specifies the size of the icon. Defaults to `normal`. See valid values in the source documentation.

- **Type**: String
- **Default**: "normal"
- **Required**: No

### url

Specifies the URL of a custom icon. Use if the icon is not predefined and cannot be an SVG. `svg` slot takes precedence.

- **Type**: String
- **Required**: No

### variant

Specifies the color variant of the icon. Defaults to `normal`.

- **Type**: String
- **Default**: "normal"
- **Required**: No
```

--------------------------------

### TopNavigation Component Properties

Source: https://github.com/aws/awsui-documentation/blob/main/components/top-navigation.md

This snippet details the configurable properties for the TopNavigation component, allowing customization of its appearance, identity, and interactive elements.

```APIDOC
## TopNavigation Component Properties

### className

Adds the specified classes to the root element of the component.

Type: String
Required: No

### i18nStrings

An object containing all the localized strings required by the component.

Type: `TopNavigationProps.I18nStrings`
Required: Yes

### id

Adds the specified ID to the root element of the component.

Type: String
Required: No

### identity

Properties describing the product identity.

Type: `TopNavigationProps.Identity`
Required: Yes

### utilities

A list of utility navigation elements. Supported types are `button` and `menu-dropdown`.

Type: `ReadonlyArray<TopNavigationProps.Utility>`
Default: `[]`
Required: No
```

--------------------------------

### S3 Resource Selector Properties

Source: https://github.com/aws/awsui-documentation/blob/main/components/s3-resource-selector.md

Configuration properties for the S3 Resource Selector component.

```APIDOC
## Properties

### inputAriaDescribedby

Adds `aria-labelledby` to the S3 URI input. If you're using this component within a form field, you do not need to set this property, as the form field component will set it automatically. Use this property if the component isn't surrounded by a form field, or you want to override the value automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.

Type: String
Required: No

### invalid

Whether the S3 URI input field is in invalid state.

Type: Boolean
Default: `false`
Valid values: `true | false`
Required: No

### objectsIsItemDisabled

Optionally overrides whether an object should be disabled for selection in the Objects view or not. Similar to `bucketsIsItemDisabled` this property takes precedence over the `selectableItemsTypes` property.

Type: (item: S3ResourceSelectorProps.Object) => boolean
Required: No

### objectsVisibleColumns

Optionally overrides the set of visible columns in the Objects view. Available columns: 'Key', 'LastModified', and 'Size'.

Type: ReadonlyArray<string>
Default: `['Key', 'LastModified', 'Size']`
Required: No

### resource

The current selected resource. Resource has the following properties:
- `uri` (string) - URI of the resource.
- `versionId` (string) - (Optional) Version ID of the selected resource.

Type: 
```
S3ResourceSelectorProps.Resource {
  uri: string
  versionId?: string
}
```

Required: Yes

### selectableItemsTypes

An array of the item types that are selectable in the table view. The array may contain the following items: 'buckets', 'objects', or 'versions'. Example: ['buckets', 'objects']. By default, no items are selectable.
This property determines whether the component operates in Read mode or Write mode:
* Read mode - When 'objects' and 'versions' values are provided (folder selection should be disabled by customizing `objectsIsItemDisabled` function).
* Write mode - When 'buckets' and 'objects' values are provided (file selection should be disabled by customizing `objectsIsItemDisabled` function).

Type: ReadonlyArray<S3ResourceSelectorProps.SelectableItems>
Default: `[]`
Required: No

### versionsIsItemDisabled

Optionally overrides whether a version should be disabled for selection in the Versions view or not. Similar to `bucketsIsItemDisabled` this property takes precedence over the `selectableItemsTypes` property.

Type: (item: S3ResourceSelectorProps.Version) => boolean
Required: No

### versionsVisibleColumns

Optionally overrides the set of visible columns in the Versions view. Available columns: 'ID', 'CreationDate', and 'Size'.

Type: ReadonlyArray<string>
Default: `['ID', 'LastModified', 'Size']`
Required: No

### viewHref

Href of the selected object that is applied to the View button.

Type: String
Required: No
```

--------------------------------

### onChange

Source: https://github.com/aws/awsui-documentation/blob/main/components/date-range-picker.md

Fired whenever a user changes the component's value. The event detail contains the current value.

```APIDOC
## onChange

### Description
Fired whenever a user changes the component's value.
The event `detail` contains the current value of the field.

### Detail type
```
DateRangePickerProps.ChangeDetail {
  value: DateRangePickerProps.Value | null
}
```

### Cancelable
No
```