Selection Primitives

Components for selecting single or multiple options

Select

Dropdown for single option selection

Single Selection

Prop	Type	Default	Description
`value`	`string`	`-`	Selected value
`onValueChange`	`(value: string) => void`	`-`	Change handler
`disabled`	`boolean`	`false`	Disable select
`placeholder`	`string`	`-`	Placeholder text

MultiSelect

Dropdown for selecting multiple options

Select Multiple

Prop	Type	Default	Description
`options`	`{ label: string; value: string }[]`	`-`	Available options
`selected`	`string[]`	`[]`	Selected values
`onChange`	`(values: string[]) => void`	`-`	Change handler
`placeholder`	`string`	`-`	Placeholder text

Switch

Toggle switch for on/off states

Toggle Switch

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Checked state
`onCheckedChange`	`(checked: boolean) => void`	`-`	Change handler
`disabled`	`boolean`	`false`	Disable switch

Checkbox

Checkbox for boolean selection

Checkbox option

Prop	Type	Default	Description
`checked`	`boolean \| "indeterminate"`	`false`	Checked state
`onCheckedChange`	`(checked: boolean) => void`	`-`	Change handler
`disabled`	`boolean`	`false`	Disable checkbox

RadioGroup

Radio buttons for mutually exclusive selection

Select One Option

Option 1

Option 2

Option 3

Prop	Type	Default	Description
`value`	`string`	`-`	Selected value
`onValueChange`	`(value: string) => void`	`-`	Change handler
`disabled`	`boolean`	`false`	Disable all options

Toggle

Single toggle button with pressed state

Toggle Variants

With Text

Prop	Type	Default	Description
`pressed`	`boolean`	`false`	Pressed state
`onPressedChange`	`(pressed: boolean) => void`	`-`	Change handler
`variant`	`"default" \| "outline"`	`"default"`	Visual variant
`disabled`	`boolean`	`false`	Disable toggle

ToggleGroup

Group of toggle buttons for single or multiple selection

Single Selection (Type: single)

Multiple Selection (Type: multiple)

With Outline Variant

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`-`	Selection mode
`value`	`string \| string[]`	`-`	Selected value(s)
`onValueChange`	`(value) => void`	`-`	Change handler
`variant`	`"default" \| "outline"`	`"default"`	Visual variant

TagInput

Free-form tag entry with keyboard shortcuts

Enter tags (press Enter to add)

react

typescript

Prop	Type	Default	Description
`tags`	`string[]`	`[]`	Current tags
`onTagsChange`	`(tags: string[]) => void`	`-`	Change handler
`placeholder`	`string`	`-`	Input placeholder
`maxTags`	`number`	`-`	Maximum number of tags

import { TagInput } from '@/ui/primitives';

const [tags, setTags] = useState<string[]>(['react']);

<TagInput
  tags={tags}
  onTagsChange={setTags}
  placeholder="Add tags..."
/>

Prop

Type

Default

Description

value

string

-

Selected value

onValueChange

(value: string) => void

-

Change handler

disabled

boolean

false

Disable select

placeholder

string

-

Placeholder text

Prop

Type

Default

Description

options

{ label: string; value: string }[]

-

Available options

selected

string[]

[]

Selected values

onChange

(values: string[]) => void

-

Change handler

placeholder

string

-

Placeholder text

Prop

Type

Default

Description

checked

boolean

false

Checked state

onCheckedChange

(checked: boolean) => void

-

Change handler

disabled

boolean

false

Disable switch

Prop

Type

Default

Description

checked

boolean | "indeterminate"

false

Checked state

onCheckedChange

(checked: boolean) => void

-

Change handler

disabled

boolean

false

Disable checkbox

Prop

Type

Default

Description

value

string

-

Selected value

onValueChange

(value: string) => void

-

Change handler

disabled

boolean

false

Disable all options

Prop

Type

Default

Description

pressed

boolean

false

Pressed state

onPressedChange

(pressed: boolean) => void

-

Change handler

variant

"default" | "outline"

"default"

Visual variant

disabled

boolean

false

Disable toggle

Prop

Type

Default

Description

type

"single" | "multiple"

-

Selection mode

value

string | string[]

-

Selected value(s)

onValueChange

(value) => void

-

Change handler

variant

"default" | "outline"

"default"

Visual variant

Prop

Type

Default

Description

tags

string[]

[]

Current tags

onTagsChange

(tags: string[]) => void

-

Change handler

placeholder

string

-

Input placeholder

maxTags

number

-

Maximum number of tags