Skip to content
zedkit
@zedtech/zedkit-ui

Select

Accessible dropdown select with trigger, value and items; empty lists render a disabled message item.

Stable@zedtech/zedkit-ui

Wraps: @radix-ui/react-select

Shipping options depend on the region.

View props table
Who is it for?
Form builders offering 4+ exclusive options in little space.
When should I use it?
For long option lists where radio groups would sprawl.
When should I pick something else?
For 2–3 visible options — use radio inputs or OptionCards instead.

Use it

Simple
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@zedtech/zedkit-ui";
const items = regions.map((r) => <SelectItem key={r.id} value={r.id}>{r.name}</SelectItem>);
<Select onValueChange={setRegion}>
<SelectTrigger><SelectValue placeholder="Pick a region" /></SelectTrigger>
<SelectContent>{items.length === 0 ? <SelectItem value="none" disabled>No regions available</SelectItem> : items}</SelectContent>

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

You get
Every component from one import, with the theme tokens included. Updates arrive with your package manager.
You need
  • React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

  1. Install

    Terminal
    pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

  2. Load the styles

    Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

    src/app/globals.cssReplace the contents
    @import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

  3. Pick a look

    Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

    src/app/layout.tsxReplace the contents
    import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

  4. Load the fonts

    The Glass look uses Inter and Space Grotesk; these imports self-host them.

    src/app/fonts.tsCreate the file
    import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";

  5. Import and render

    Simple
    import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@zedtech/zedkit-ui";

const items = regions.map((r) => <SelectItem key={r.id} value={r.id}>{r.name}</SelectItem>);
<Select onValueChange={setRegion}>
<SelectTrigger><SelectValue placeholder="Pick a region" /></SelectTrigger>
<SelectContent>{items.length === 0 ? <SelectItem value="none" disabled>No regions available</SelectItem> : items}</SelectContent>

Package version 2.0.1.

Props

Prop

Type

Accessibility

Built on Radix Select: the trigger has role="combobox", opens with Enter, Space, ArrowUp or ArrowDown, and options are chosen with the arrows, typeahead and Enter; Escape closes it and returns focus to the trigger. Typing a letter on the closed trigger changes the value without opening it. The trigger needs a name: pair it with a Label whose htmlFor matches the trigger id, or pass aria-label. The list renders in a portal, so inside a scoped theme wrap it in ThemeScope to keep its tokens.

Textarea

Labelled multi-line textarea with consistent styling.

Combobox

Searchable single-select combobox with popover list, empty and loading rows, keyboard navigation.

On this page

PreviewGuidanceUse itKit not installed yet?PropsAccessibilityRelated