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>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component SelectDefault layout:inline style:select {
  label "Select a plan"
  text "Select a plan"
  text "Free"
  text "Pro"
  text "Team"
}

page "/audit/select/default" type:custom {
  use SelectDefault
}

API Reference

Generated from the component's exported types.

SelectProps

Extends ComponentPropsWithoutRef<typeof SelectPrimitive.Root>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Uncontrolled initial value.
`onValueChange`	`(value: string) => void`	—	Called when the value changes.
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`required`	`boolean`	—	Marks the control as required.
`name`	`string`	—	Submitted name when used in a form.
`dir`	`"ltr" \| "rtl"`	—	Reading direction. Inherits from the document when omitted.

SelectGroupProps

Extends ComponentPropsWithoutRef<typeof SelectPrimitive.Group>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contents of the component.

SelectValueProps

Extends ComponentPropsWithoutRef<typeof SelectPrimitive.Value>

Prop	Type	Default	Description
`placeholder`	`string`	—	Placeholder shown when the value is empty.
`asChild`	`boolean`	—	Render as the child element via Slot.

SelectTriggerProps

Extends ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

SelectScrollUpButtonProps

Extends ComponentPropsWithoutRef< typeof SelectPrimitive.ScrollUpButton >

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

SelectScrollDownButtonProps

Extends ComponentPropsWithoutRef< typeof SelectPrimitive.ScrollDownButton >

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

SelectContentProps

Extends ComponentPropsWithoutRef<typeof SelectPrimitive.Content>

Prop	Type	Default	Description
`position`	`"item-aligned" \| "popper"`	—	How the list is positioned relative to the trigger.
`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side of the trigger.
`sideOffset`	`number`	—	Distance in pixels from the trigger.
`align`	`"start" \| "center" \| "end"`	—	Alignment along the chosen side.
`alignOffset`	`number`	—	Offset along the alignment axis.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

SelectLabelProps

Extends ComponentPropsWithoutRef<typeof SelectPrimitive.Label>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

SelectItemProps

Extends ComponentPropsWithoutRef<typeof SelectPrimitive.Item>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`textValue`	`string`	—	Text used for typeahead. Defaults to the item's text.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.

SelectSeparatorProps

Extends ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.