Typus

Basic Usage & Label Positions

Single (Floating)

Framework

Selected: None

Multiple (Floating)

Frameworks

Selected: None

Single (Top Label)

Top Label Select

Placeholder visible

Selected: None

Multiple (Top Label)

Multiple Top Label

Option Two (React) +1

Selected: react, svelte

Single (Left Label)

Left Label

Placeholder visible

Selected: None

Multiple (Left Label)

Left Label Multi

Select frameworks...

Selected: None

Features

Filterable

Filterable Select

Selected: None

Clearable (Single)

Option One (Vue)

Clearable Select

Selected: vue

Not Clearable (Single)

Not Clearable

Selected: None

Async Search (Remote)

Search Frameworks

Selected: None

States

Required

Required Field *

Selected: None

Helper Text

Field with Helper

Please choose your favorite option.

Selected: None

Error State (Boolean)

Field with Error

Error toggled by button.

Selected: None

Error State (String)

Error with Message

Invalid selection provided via prop.

Selected: None

Disabled State

Option Three (Angular)

Disabled Select

Value: angular

Disabled Multiple

Option One (Vue)

Disabled Multiple

Value: vue

(Toggles with other button)

Sizing

Small Size (sm)

Small Select

Small Multiple

Selected: None

Medium Size (md)

Medium Select

Medium Multiple

Selected: None

Large Size (lg)

Large Select

Large Multiple

Selected: None

Width & Customization

Custom Width

Half Width Select

Selected: None

Custom Class

Select with Custom Class

Selected: None