Select React Component

Installation

bash

npx @smicolon/fasla-ui@latest 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

Basic select

tsx

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

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

export function CitySelect() {
  return (
    <Select
      name="city"
      aria-label="City"
      options={cities}
      placeholder="Select a city"
    />
  )
}

Different sizes

tsx

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

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

export function CitySelectSizes() {
  return (
    <div className="flex flex-col gap-4">
      <Select aria-label="City" options={cities} selectSize="sm" />
      <Select aria-label="City" options={cities} selectSize="default" />
      <Select aria-label="City" options={cities} selectSize="lg" />
    </div>
  )
}

Error state

tsx

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

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

export function CitySelectWithError() {
  return <Select name="city" aria-label="City" options={cities} error aria-invalid />
}