#Select
The Select
component renders a <select>
field with options.
#Import
import { Select, SelectField } from 'bumbag'
#Usage
#Fields
You can also use the <SelectField>
component, which internally has a FieldWrapper to wrap form controls such as labels, hint text and validation text.
It accepts a combination of Select props and FieldWrapper props.
#Default values
For uncontrolled select field, set a default value using the defaultValue
prop.
#Placeholders
Add a placeholder to a select field with the placeholder
prop.
#Disabled
Make the select field disabled with the disabled
prop.
#Loading
#Sizes
An input can come in different sizes - small
, medium
, large
, or the default.
#States
An input can use different states (as per palette) such as danger
, success
and warning
.
#Addons
You can use the Group component to add on stuff to your <Select>
.
#Addons
#Controlled Usage
The previous examples are examples of uncontrolled usage. To control the value yourself, use a combination of onChange
and value
.
Note: Do not use defaultValue
with controlled inputs!
#Accessibility
#Patterns
- If an input is required, then
aria-required
is set totrue
for the input. - If an input is invalid, then
aria-invalid
is set totrue
for the input.
#Props
#Select Props
autoFocus
boolean
Automatically focus on the input
defaultValue
string
Default value of the input
disabled
boolean
Disables the input
isLoading
boolean
Adds a cute loading indicator to the input field
isRequired
boolean
Makes the input required and sets aria-invalid to true
name
string
Name of the input field
options
Required
{ label: string; value: any; disabled?: boolean; }[]
size
"default" | (string & {}) | "small" | "medium" | "large"
Alters the size of the input. Can be "small", "medium" or "large"
placeholder
string
Hint text to display
selectRef
((instance: any) => void) | RefObject<any>
state
string
State of the input. Can be any color in the palette.
value
any
Value of the input
onBlur
(event: FocusEvent<HTMLInputElement>) => void
Function to invoke when focus is lost
onChange
(event: FormEvent<HTMLInputElement>) => void
Function to invoke when input has changed
onFocus
(event: FocusEvent<HTMLInputElement>) => void
Function to invoke when input is focused
#Theming
Select.styles.base
Select.styles.disabled
Select.Wrapper.styles.base
Select.Icon.styles.base
Select.Spinner.styles.base