Select React Component

Installation

bash

npx @smicolon/cli add select

Run init once per project before adding components. See Installation.

Preview

Sizes

States

Props

Prop	Type	Default	Description
`options`	`SelectOption[]`	—	Options to choose from.
`placeholder`	`string`	—	Text shown before a choice.
`selectSize`	`"sm" \| "default" \| "lg"`	`"default"`	Select size.
`error`	`boolean`	`false`	Marks the select as invalid.
`disabled`	`boolean`	`false`	Disables the select and dims it.
`value`	`string`	—	Selected value. Use it with `onChange`.
`name`	`string`	—	Name submitted with the form.
`onChange`	`(event) => void`	—	Called when the choice changes.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { Select } from "@/components/ui/select"

const options = [
  { value: "riyadh", label: "Riyadh" },
  { value: "jeddah", label: "Jeddah" },
  { value: "dammam", label: "Dammam" },
]

// Basic select
<Select
  options={options}
  placeholder="Select a city"
/>

// Different sizes
<Select options={options} selectSize="sm" />
<Select options={options} selectSize="default" />
<Select options={options} selectSize="lg" />

// Error state
<Select options={options} error />