@govuk-react/input-field

Styled composite component displaying an input with a label and hint text and error text depending on props.

Stats

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

Readme

InputField

Import

  import InputField from '@govuk-react/input-field';

Usage

Simple

import { InputField } from 'govuk-react'

<InputField name="group0">National Insurance number</InputField>

Input with hint text

<InputField
   name="group1"
   hint={[
     'It’s on your National Insurance card, benefit letter, payslip or P60.',
     <br />,
     'For example, ‘QQ 12 34 56 C’.',
   ]}
 >
   National Insurance number
 </InputField>

Input with hint text & error

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

 <InputField
   name="group1"
   hint={[
     'It’s on your National Insurance card, benefit letter, payslip or P60.',
     <br />,
     'For example, ‘QQ 12 34 56 C’.',
   ]}
   meta={meta}
 >
   National Insurance number
 </InputField>

References:

Properties

Prop Required Default Type Description
children true `````` node
hint undefined node
input {} shape[object Object]
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.