Forms

Select

Composable dropdown with groups.

Import

tsx

import { Select } from "@cronus-ui/ui";

bash

npx cronus-ui add select

Examples

Grouped

A grouped dropdown with labels, items, and a separator.

Deploy region

No region selected yet.

tsx

function SelectDemo() {
  const [region, setRegion] = useState<string | undefined>();

  return (
    <Field className="max-w-xs">
      <Label htmlFor="region">Deploy region</Label>
      <Select value={region ?? ""} onValueChange={setRegion}>
        <SelectTrigger id="region">
          <SelectValue placeholder="Choose a region" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Americas</SelectLabel>
            <SelectItem value="us-east-1">US East (N. Virginia)</SelectItem>
            <SelectItem value="us-west-2">US West (Oregon)</SelectItem>
            <SelectItem value="sa-east-1">São Paulo</SelectItem>
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Europe</SelectLabel>
            <SelectItem value="eu-west-1">Ireland</SelectItem>
            <SelectItem value="eu-central-1">Frankfurt</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
      <FieldDescription>
        {region ? `Selected: ${region}` : "No region selected yet."}
      </FieldDescription>
    </Field>
  );
}