NativeSelect
Capture user feedback limited to large set of options
Import
Source
Docs
Package
Usage
This is anonymous
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Data prop
NativeSelect component accepts data in the following formats:
- Array of strings (when item value is the same as label):
['React', 'Angular']
- Array of objects (when item value different label):
[{ value: '1', label: 'React' }, { value: '2', label: 'Angular' }]
Note that item value should always be a string, other data formats (numbers, boolean, etc.) are not supported.
Controlled
Invalid state and error
Pick at least one item
Disabled state
With icon
Right section
You can replace icon in right section with rightSection
prop.
Note that in this case clearable
option will not work and will need to handle it yourself:
Get input ref
Accessibility
Provide aria-label
in case you use component without label for screen reader support:
NativeSelect component props
Name | Type | Description |
---|---|---|
data * | (string | SelectItem)[] | Data used to render options |
description | ReactNode | Input description, displayed after label |
descriptionProps | Record<string, any> | Props spread to description element |
disabled | boolean | Disabled input state |
error | ReactNode | Displays error message after input |
errorProps | Record<string, any> | Props spread to error element |
icon | ReactNode | Adds icon on the left side of input |
iconWidth | Width<string | number> | Width of icon section |
id | string | id is used to bind input and label, if not passed unique id will be generated for each input |
inputContainer | (children: ReactNode) => ReactNode | Input container component, defaults to React.Fragment |
inputWrapperOrder | ("input" | "label" | "error" | "description")[] | Controls order of the Input.Wrapper elements |
label | ReactNode | Input label, displayed before input |
labelProps | Record<string, any> | Props spread to label element |
placeholder | string | |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
required | boolean | Adds required attribute to the input and red asterisk on the right side of label |
rightSection | ReactNode | Right section of input, similar to icon but on the right |
rightSectionProps | Record<string, any> | Props spread to rightSection div element |
rightSectionWidth | Width<string | number> | Width of right section, is used to calculate input padding-right |
size | "xs" | "sm" | "md" | "lg" | "xl" | Input size |
variant | Variants<"unstyled" | "default" | "filled"> | Defines input appearance, defaults to default in light color scheme and filled in dark |
withAsterisk | boolean | Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input |
wrapperProps | Record<string, any> | Props passed to root element (InputWrapper component) |
NativeSelect component Styles API
Name | Static selector | Description |
---|---|---|
wrapper | .asuikit-NativeSelect-wrapper | Root Input element |
icon | .asuikit-NativeSelect-icon | Input icon wrapper on the left side of the input, controlled by icon prop |
input | .asuikit-NativeSelect-input | Main input element |
rightSection | .asuikit-NativeSelect-rightSection | Input right section, controlled by rightSection prop |
root | .asuikit-NativeSelect-root | Root element |
label | .asuikit-NativeSelect-label | Label element styles, defined by label prop |
error | .asuikit-NativeSelect-error | Error element styles, defined by error prop |
description | .asuikit-NativeSelect-description | Description element styles, defined by description prop |
required | .asuikit-NativeSelect-required | Required asterisk element styles, defined by required prop |