Selector - Spektral UI

Interactive demo — tweak the Selector props below

Palette

Variant

Size

Rounded

Uppercase

Layout

Columns

Variants — map onto Button's variants

flat

outlined

ghost

naked

Svelte

<Selector
    label="Layout"
    options={["grid", "list", "tile"]}
    bind:value={layout}
/> 

Prop	Type	Default
label	`string`	`—`
palette	`"accent" \| "tone" \| "neutral" \| "error" \| "warning" \| "success" \| "info"`	`"accent"`
variant	`"flat" \| "outlined" \| "ghost" \| "naked"`	`"outlined"`
size	`"sm" \| "md" \| "lg"`	`"sm"`
rounded	`boolean`	`false`
uppercase	`boolean`	`false`
direction	`"row" \| "column"`	`"row"`
options	`readonly (T \| OptionEntry)[]`	`—`
value	`T`	`—`
onchange	`(value: T) => void`	`—`

Prop label

Type string

Default —

Prop palette

Default "accent"

Prop variant

Type "flat" | "outlined" | "ghost" | "naked"

Default "outlined"

Prop size

Type "sm" | "md" | "lg"

Default "sm"

Prop rounded

Type boolean

Default false

Prop uppercase

Type boolean

Default false

Prop direction

Type "row" | "column"

Default "row"

Prop options

Type readonly (T | OptionEntry)[]

Default —

Prop value

Type T

Default —

Prop onchange

Type (value: T) => void

Default —