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.
92 lines (78 loc) • 2.42 kB
Markdown
A component that defines a drop-down list of elements that could be selected.
### Default
```jsx live=true
() => {
const [value, setValue] = React.useState("");
return (
<SelectInput value={value} onChange={e => setValue(e.target.value)}>
<option value="bilmodell">Bilmodell</option>
<option value="c30" disabled>
Volvo C30
</option>
<option value="c70">Volvo C70</option>
<option value="c90">Volvo C90</option>
<option value="c40">Volvo S40</option>
<option value="s60">Volvo S60</option>
<option value="s80">Volvo S80</option>
<option value="s90">Volvo S90</option>
</SelectInput>
);
};
```
### Loading
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} onChange={e => setValue(e.target.value)} loading>
<option value="bilmodell">Bilmodell</option>
<option value="c30" disabled>
Volvo C30
</option>
<option value="c70">Volvo C70</option>
<option value="c90">Volvo C90</option>
<option value="c40">Volvo S40</option>
<option value="s60">Volvo S60</option>
<option value="s80">Volvo S80</option>
<option value="s90">Volvo S90</option>
</SelectInput>
);
};
```
### OptGroups
```jsx live=true
() => {
const [value, setValue] = React.useState("");
return (
<SelectInput value={value} onChange={e => setValue(e.target.value)}>
<optgroup label="Berlin">
<option value="c70">Volvo C70</option>
<option value="c90">Volvo C90</option>
</optgroup>
<optgroup label="Göteborg">
<option value="s80">Volvo S80</option>
<option value="s90">Volvo S90</option>
</optgroup>
</SelectInput>
);
};
```
### Invalid State
```jsx live=true
() => {
const [value, setValue] = React.useState("");
return (
<SelectInput isValid={false} value={value} onChange={e => setValue(e.target.value)}>
<optgroup label="Berlin">
<option value="c70">Volvo C70</option>
<option value="c90">Volvo C90</option>
</optgroup>
<optgroup label="Göteborg">
<option value="s80">Volvo S80</option>
<option value="s90">Volvo S90</option>
</optgroup>
</SelectInput>
);
};
```