@govuk-react/select

Styled select menu, taking its options as children and with various configurable parameters via props.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@govuk-react/select
Minified + gzip package size for @govuk-react/select in KB

Readme

Select

Import

  import Select from '@govuk-react/select';

Usage

Simple

<Select name="group1" label="This is a label">
  <option value="0">GOV.UK elements option 1</option>
  <option value="1">GOV.UK elements option 2</option>
  <option value="2">GOV.UK elements option 3</option>
</Select>

Select with hint text

<Select
   name="group1"
   label="This is a label"
   hint={[
     'This is and example of hintText/description of what we need from you.',
   ]}
 >
   <option value="0">GOV.UK elements option 1</option>
   <option value="1">GOV.UK elements option 2</option>
   <option value="2">GOV.UK elements option 3</option>
</Select>

Select with hint text & error

const meta = {
  touched: true,
  error: 'Example',
};

<Select
   name="group1"
   label="This is a label"
   hint={[
     'This is and example of hintText/description of what we need from you.',
   ]}
   meta={meta}
 >
   <option value="0">GOV.UK elements option 1</option>
   <option value="1">GOV.UK elements option 2</option>
   <option value="2">GOV.UK elements option 3</option>
</Select>

Standalone input with inline label

import LabelText from '@govuk-react/label-text';
import { SelectInput } '@govuk-react/select';

<label>
   <LabelText>Sort by:&nbsp;
     <SelectInput>
       <option value="0">People</option>
       <option value="1">Animals</option>
       <option value="2">Vegetables</option>
     </SelectInput>
   </LabelText>
 </label>

References:

Properties

Prop Required Default Type Description
children true `````` node
errorText undefined string
hint undefined string
input {} shape[object Object]
label true `````` string
meta {} shape[object Object]

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.