Select
Dropdown select built on Radix UI. Supports `default` and `colored` variants, multiple sizes, and full keyboard navigation.
Dropdown select built on Radix UI. Supports default and colored variants, multiple sizes, and full keyboard navigation.
import { Select } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
allowClear | Optional | boolean | undefined | false | Show a clear button when a value is selected |
Usage
Compound Radix-based select with Select, SelectTrigger, SelectContent,
SelectItem, SelectValue, and SelectGroup pieces.
Select props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
value | string | no | — | Controlled value. |
defaultValue | string | no | — | Uncontrolled initial value. |
onValueChange | (v: string) => void | no | — | Setter for the value. |
allowClear | boolean | no | false | Show a clear (X) button when a value is set. |
SelectTrigger accepts size ("sm" \| "md" \| "lg") and variant
("default" \| "colored").
Example
/** * Runnable example for Select. */import { useState } from 'react'import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@tetherto/mdk-react-devkit'export const SelectExample = () => { const [value, setValue] = useState<string>() return ( <Select value={value} onValueChange={setValue}> <SelectTrigger style={{ width: 240 }}> <SelectValue placeholder="Select a container" /> </SelectTrigger> <SelectContent> <SelectItem value="cont-A">Container A</SelectItem> <SelectItem value="cont-B">Container B</SelectItem> <SelectItem value="cont-C">Container C</SelectItem> </SelectContent> </Select> )}