v14.0.8


inputs

Select

The simplest way to pick an option from the list

Features

  • Keyboard accessible
  • Customizable icon
  • Multiple styles and sizes
  • Themes ready

Anatomy

import { Select } from "@wonderflow/react-components";
export default () => { return (
<Select
defaultValue="placeholder"
label="Label"
message="Sample hint message">
<option value="placeholder" hidden disabled>
Pick an option
</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<optgroup label="Option Group Two">
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option> </optgroup> </Select> ); };

tsx

API Reference

PROPERTY
TYPE
DEFAULT
icon
enum
sort-alt
label
ReactNode
message
string
kind
enum
single
dimension
enum
regular
disabled
boolean
invalid
boolean
onChange
function

Accessibility

Adheres to the select role requirements.

Keyboard interactions

NameDescription
tabMove focus on the element or outside
spaceOpen the listbox

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024