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.
Labels#
If you want to have the label contained within the bounds of the select field, supply the containLabel
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
.
Colors#
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
containLabel
boolean
If the label
prop is supplied, is it contained inside the select?
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
label
string
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
selectProps
{ unstable_system?: any; top?: string | number | { [key: string]: string }; right?: string | number | { [key: string]: string }; bottom?: string | number | { [key: string]: string }; left?: string | number | { [key: string]: string }; ... 797 more ...; onFocus?: (event: FocusEvent<...>) => void; }
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