@paprika/select
v2.0.17
Published
The Select component is a styled select drop-down form input that can be used as a controlled or uncontrolled component.
Downloads
8,177
Keywords
Readme
@paprika/select
Description
The Select component is a styled select drop-down form input that can be used as a controlled or uncontrolled component.
Installation
yarn add @paprika/select
or with npm:
npm install @paprika/select
Props
Select
| Prop | Type | required | default | Description | | ------------ | ----------------------------------------------------------------------------- | -------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | a11yText | string | false | null | Provides a non-visible label for this select element for assistive technologies. | | children | node | false | null | List of options as standard option elements. | | defaultValue | string | false | null | Sets the default selected value for an uncontrolled component. | | hasError | bool | false | false | If true displays a red border around select element to indicate error. | | isDisabled | bool | false | false | If true it makes the select element disabled. | | isReadOnly | bool | false | false | If true it makes the select element read only. | | onChange | func | false | () => {} | Callback to be executed when the selected value is changed. Receives the onChange event as an argument. Required when value prop is provided (component is controlled). | | placeholder | string | false | null | Display value for a disabled first option with an empty string value. | | size | [ Select.types.size.SMALL, Select.types.size.MEDIUM, Select.types.size.LARGE] | false | Select.types.size.MEDIUM | Specifies the visual size of the select element. | | value | string | false | undefined | The selected value for the select element. |
Select.Container
All props and attributes are spread onto the root container <div>
element.
Usage
The <Select>
can be used as a controlled or an uncontrolled component.
To use it as a controlled component:
import Select from "@paprika/select";
...
const [value, setValue] = React.useState("Coke");
...
<Select
value={value}
onChange={event => setValue(event.target.value)}
>
<option value="Coke">Coke</option>
<option value="Pepsi">Pepsi</option>
</Select>
To use it as an uncontrolled component:
import Select from "@paprika/select";
...
const refSelect = React.useRef();
...
<Select
defaultValue="Coke"
ref={refSelect}
>
<option value="Coke">Coke</option>
<option value="Pepsi">Pepsi</option>
</Select>
...
refSelect.current.value // latest value
To access the value of an uncontrolled component, you can pass a handler function for the onChange
prop that will have the event
as an argument. You can use the event.target.value
as needed.
Alternatively, you can include a ref
on the component and access ref.current.value
at any time.