Dropdown Input Component Playground

OPS Design System dropdown input – select with label, states and optional suffix

Props

Label

State

Placeholder

Required (asterisk)

Multi-select (checkboxes + Select All)

Show suffix (e.g. USD)

Label Text *

Code

<DropdownInput label="Label Text" required value={value} onValueChange={setValue} options={options} />

All states

default

Label Text *

hover

Label Text *

focus

Label Text *

disabled

Label Text *

disabledLight

Label Text *

success

Label Text *

error

Label Text *

With suffix (USD)

Label Text *

Multi-select (with Select All)

Frameworks