vcc-ui
Version:
VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.
62 lines (53 loc) • 1.51 kB
Markdown
A component that defines a drop-down list of elements that could be selected.
```jsx live=true
() => {
const [value, setValue] = React.useState("");
return (
<SelectInput
value={value}
placeholder="Select a Car"
options={[
{ value: "c30", label: "Volvo C30" },
{ value: "c70", label: "Volvo C70" },
{ value: "c90", label: "Volvo C90" },
{ value: "c40", label: "Volvo S40", disabled: true },
{ value: "s60", label: "Volvo S60" },
{ value: "s80", label: "Volvo S80" },
{ value: "s90", label: "Volvo S90" }
]}
onChange={e => {
setValue(e.target.value);
}}
/>
);
};
```
Rendering the select input in a loading state can be useful way to give feedback to the user that the component is loading new options.
```jsx live=true
() => {
const [value, setValue] = React.useState("");
return (
<SelectInput
value={value}
placeholder="Select a Car"
options={[
{ value: "c30", label: "Volvo C30" },
{ value: "c70", label: "Volvo C70" },
{ value: "c90", label: "Volvo C90" },
{ value: "c40", label: "Volvo S40", disabled: true },
{ value: "s60", label: "Volvo S60" },
{ value: "s80", label: "Volvo S80" },
{ value: "s90", label: "Volvo S90" }
]}
onChange={e => {
setValue(e.target.value);
}}
loading
/>
);
};
```
- *Added in version 0.0.45*