@elemental-ui-alpha/select-field
v0.0.2
Published
The select-field lets a user select a single item from a list of options.
Downloads
5
Readme
Select Field
import { SelectField, SelectInput } from '@elemental-ui-alpha/text-field';
SelectField
The SelectField
component is the recommended component to use, which connects
the label, description, and message to the input element.
Label
Each text field must be accompanied by a label.
<SelectField label="Framework" placeholder="Please select">
<option value="1">React</option>
<option value="2">Vue</option>
<option value="3">Svelte</option>
</SelectField>
Description
Labels should be concise. If you need to provide extra information to describe
the field, use the description
property.
<SelectField
label="Framework"
description="Each framework has benefits and caveats, choose wisely"
placeholder="Please select"
>
<option value="1">React</option>
<option value="2">Vue</option>
<option value="3">Svelte</option>
</SelectField>
Message
Offer a message to the user that may aid input.
<SelectField
label="Framework"
message="Sorry, no Angular"
placeholder="Please select"
>
<option value="1">React</option>
<option value="2">Vue</option>
<option value="3">Svelte</option>
</SelectField>
SelectInput
The SelectInput
component is just a styled select
element.
<SelectInput placeholder="Please select">
<option value="1">React</option>
<option value="2">Vue</option>
<option value="3">Svelte</option>
</SelectInput>