Select

Pick an option from a list.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Button, Field, ListBox, Popover
Status
Select example
import { Select, SelectItem } from "@/shim-ui/select";

export default () => (
  <Select label="Status" placeholder="Select status">
    <SelectItem>Open</SelectItem>
    <SelectItem>Closed</SelectItem>
    <SelectItem>In Progress</SelectItem>
    <SelectItem>Resolved</SelectItem>
  </Select>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add select

Size

Use the size prop to scale the select control.

Status
Status
Status
Size example
import { Select, SelectItem } from "@/shim-ui/select";

export default () => (
  <>
    <Select label="Status" placeholder="Select status" size={1}>
      <SelectItem>Open</SelectItem>
      <SelectItem>Closed</SelectItem>
    </Select>
    <Select label="Status" placeholder="Select status" size={2}>
      <SelectItem>Open</SelectItem>
      <SelectItem>Closed</SelectItem>
    </Select>
    <Select label="Status" placeholder="Select status" size={3}>
      <SelectItem>Open</SelectItem>
      <SelectItem>Closed</SelectItem>
    </Select>
  </>
);

Controlled selection with dynamic items

Combine selectedKey, onSelectionChange, and dynamicitems to manage selection in application state.

Selected: Open

Controlled selection with dynamic items example
"use client";

import { useState } from "react";
import type { Key } from "react-aria-components";
import { Select, SelectItem } from "@/shim-ui/select";

export default () => {
  let options = [
    { name: "Open" },
    { name: "Closed" },
    { name: "In Progress" },
    { name: "Resolved" },
  ];
  let [status, setStatus] = useState<Key>("Open");

  return (
    <>
      <Select
        aria-label="Status"
        items={options}
        onSelectionChange={(selected) => {
          if (selected !== null) {
            setStatus(selected);
          }
        }}
        selectedKey={status}
      >
        {({ name }) => <SelectItem id={name}>{name}</SelectItem>}
      </Select>
      <p>
        Selected: <strong>{status}</strong>
      </p>
    </>
  );
};

Sections

Group options with <SelectSection> to add headings within the menu.

Sections example
import { Select, SelectItem, SelectSection } from "@/shim-ui/select";

export default () => (
  <Select aria-label="Favorite food" placeholder="Select your favorite">
    <SelectSection title="Fruits">
      <SelectItem>Apple</SelectItem>
      <SelectItem>Banana</SelectItem>
      <SelectItem>Orange</SelectItem>
    </SelectSection>
    <SelectSection title="Vegetables">
      <SelectItem>Carrot</SelectItem>
      <SelectItem>Broccoli</SelectItem>
      <SelectItem>Spinach</SelectItem>
    </SelectSection>
    <SelectSection title="Grains">
      <SelectItem>Rice</SelectItem>
      <SelectItem>Quinoa</SelectItem>
      <SelectItem>Barley</SelectItem>
    </SelectSection>
  </Select>
);

States

Use isDisabled to disable the field and isInvalid witherrorMessage to show validation feedback.

Status
StatusPlease select status
States example
import { Select, SelectItem } from "@/shim-ui/select";

export default () => (
  <>
    <Select isDisabled label="Status" placeholder="Select status">
      <SelectItem>Open</SelectItem>
      <SelectItem>Closed</SelectItem>
    </Select>

    <Select
      errorMessage={"Please select status"}
      isInvalid
      label="Status"
      placeholder="Select status"
    >
      <SelectItem>Open</SelectItem>
      <SelectItem>Closed</SelectItem>
    </Select>
  </>
);