Forms·@exepert/ui / Select

Select

A native select wrapper for choosing one value from a short list.

Open in Playground ↗All components

Variants and states

3 copy-ready examples

Default select

The current environment stays visible.

Open in Playground ↗

Starting preview…

import { Select } from "@exepert/ui";
import "@exepert/ui/styles.css";
export default function Example() {
  return (
    <Select label="Environment" options={[{ value: "production", label: "Production" }, { value: "preview", label: "Preview" }, { value: "local", label: "Local" }]} defaultValue="preview" />
  );
}

Usage

Use a select when the options are known and do not need search.

Props

label: string
options: array
defaultValue: string
helperText: string
error: string
disabled: boolean

Accessibility

Uses a native select interaction with a labelled field.
Include a meaningful empty option when a choice is required.

Install

Install the pinned public release, then import the component and stylesheet.

npm install @exepert/ui@0.1.1

import { Select } from "@exepert/ui";

import "@exepert/ui/styles.css";