<Select options={[
{ label: "us-east-1", value: "us-east-1" },
{ label: "eu-central-1", value: "eu-central-1" },
{ label: "ap-south-1", value: "ap-south-1" },
]} />Select<V extends string | number = string>
src/components/selects.tsx
Import
import { Select } from "@ossrandom/design-system";Examples
<Space size="sm">
<Select
options={[
{ label: "us-east-1", value: "us-east-1" },
{ label: "eu-central-1", value: "eu-central-1" },
{ label: "ap-south-1", value: "ap-south-1" },
]}
size="xs"
/>
<Select
options={[
{ label: "us-east-1", value: "us-east-1" },
{ label: "eu-central-1", value: "eu-central-1" },
{ label: "ap-south-1", value: "ap-south-1" },
]}
size="sm"
/>
<Select
options={[
{ label: "us-east-1", value: "us-east-1" },
{ label: "eu-central-1", value: "eu-central-1" },
{ label: "ap-south-1", value: "ap-south-1" },
]}
size="md"
/>
<Select
options={[
{ label: "us-east-1", value: "us-east-1" },
{ label: "eu-central-1", value: "eu-central-1" },
{ label: "ap-south-1", value: "ap-south-1" },
]}
size="lg"
/>
</Space><Space size="sm">
<Select
options={[
{ label: "us-east-1", value: "us-east-1" },
{ label: "eu-central-1", value: "eu-central-1" },
{ label: "ap-south-1", value: "ap-south-1" },
]}
/>
<Select
options={[
{ label: "us-east-1", value: "us-east-1" },
{ label: "eu-central-1", value: "eu-central-1" },
{ label: "ap-south-1", value: "ap-south-1" },
]}
disabled
/>
</Space>API
extends BaseProps
| Prop | Type |
|---|---|
options required |
readonly SelectOption<V>[] |
value |
V |
defaultValue |
V |
placeholder |
string |
searchable |
boolean |
clearable |
boolean |
disabled |
boolean |
status |
InputStatus |
size |
Size |
onChange |
(value: V, option: SelectOption<V>) => void; |