Forms

Select

A native `<select>`.

Server safeSource

Import

import { Select } from '@the_viveksingh/vivek-ui'

Sizes

A native select. It gets the platform picker on mobile, which no custom listbox matches for usability.

<Select size="sm" options={regions} placeholder="Small" />
<Select size="md" options={regions} placeholder="Medium" />
<Select size="lg" options={regions} placeholder="Large" />
<Select invalid options={regions} placeholder="Invalid" />

From data

placeholder becomes a disabled, selected, hidden first option - the pattern that makes "nothing chosen yet" work without a fake empty value.

Region

Data never leaves the region you pick.

<Field label="Region" help="Data never leaves the region you pick.">
  <Select
    options={[
      { value: 'ap-south-1', label: 'Mumbai (ap-south-1)' },
      { value: 'eu-west-1', label: 'Ireland (eu-west-1)' },
      { value: 'sa-east-1', label: 'Sao Paulo (sa-east-1)', disabled: true },
    ]}
    placeholder="Choose a region"
  />
</Field>

Or your own children

Skip options and pass option and optgroup elements yourself.

<Select defaultValue="team">
  <optgroup label="Paid">
    <option value="team">Team</option>
    <option value="enterprise">Enterprise</option>
  </optgroup>
  <optgroup label="Free">
    <option value="hobby">Hobby</option>
  </optgroup>
</Select>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Select
Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	—	—
`invalid`	`boolean`	—	—
`options`	`SelectOption[]`	—	Options as data. Ignored when `children` is provided.
`placeholder`	`string`	—	Adds a disabled first option, for the "nothing chosen yet" state.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Select carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.