Themed switch

options

ThemedSwitchOptions

—

Two or three options, left to right.

aria-label

string

—

Accessible name for the group, used when no external label is provided.

className

string

—

Additional CSS class name applied to the root container.

defaultValue

string

—

Default selected value for uncontrolled usage.

disabled

boolean

—

Disables the entire control.

labelledBy

string

—

ID of an external label element, used to set aria-labelledby on the root.

morphDuration

number

200

Duration of the knob icon morph animation in milliseconds.

name

string

—

Form field name for native submission.

onValueChange

((value: string) => void)

—

Fired when the selected option changes.

ref

Ref<HTMLDivElement>

—

Ref forwarded to the root element.

size

ThemedSwitchSize

ThemedSwitchSize.Medium

Size variant.

type

ThemedSwitchType

derived from `options.length` (2 → TwoWay, 3 → ThreeWay)

Number of knob positions. Controls dimensions and knob travel.

value

string

—

Controlled selected value.

value

string

required

Stable id for the option.

icon

SVGAsset

required

Icon shown on the knob when active.

label

string

required

Accessible name for the icon-only option.

knob

KnobType

Neutral

Knob theme applied when active.

disabled

boolean

false

Disables one option.

TwoWay

"two-way"

-

Binary switch matching ui-core Switch dimensions.

ThreeWay

"three-way"

-

Three-position toggle.

Switch

"switch"

-

Plain high-contrast knob matching the Switch thumb.

Neutral

"neutral"

-

Translucent slate knob for neutral / unset states.

Success

"success"

-

Green gradient knob for affirmative states.

Error

"error"

-

Red gradient knob for destructive / negative states.