Theme Select

The Theme Select component allows users to choose a theme from a predefined list, supporting theming, accessibility, and flexible input handling.

Usage & Examples

Default

default.tsx
<ThemeSelect/>

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes
<ThemeSelect theme="primary"/>
<ThemeSelect theme="secondary"/>
<ThemeSelect theme="tertiary"/>
<ThemeSelect theme="quaternary"/>

// States
<ThemeSelect state="success"/>
<ThemeSelect state="warning"/>
<ThemeSelect state="error"/>
<ThemeSelect state="info"/>

// Variants
<ThemeSelect variant="solid"/>
<ThemeSelect variant="outline"/>
<ThemeSelect variant="glass"/>

// Rounding
<ThemeSelect rounding="none"/>
<ThemeSelect rounding="medium"/>
<ThemeSelect rounding="large"/>

// Shadows
<ThemeSelect shadow="none"/>
<ThemeSelect shadow="light"/>
<ThemeSelect shadow="strong"/>

Interaction states

Disabled
interaction-states.tsx
// Disabled
<ThemeSelect disabled/>

Props API

20 props
Columns
Theme Select props API
Default
Description
aria-describedbystringNoaria—Optional described-by reference.
aria-descriptionstringNoaria—Optional description for screen readers.
aria-invalidbooleanNoaria—Marks the control invalid for assistive technology.
aria-labelstringNoaria—Optional accessible label for the theme select trigger/input.
aria-labelledbystringNoaria—Optional labelled-by reference.
aria-requiredbooleanNoaria—Marks the control required for assistive technology.
classNamestringNostyling—-
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
disabledbooleanNopropsfalseWhether the component is disabled.
idstringNoprops—HTML id applied to the relevant element.
invalidbooleanNoprops—-
labelReactNodeNoprops—Visible label content for the component.