The field component is responsible for implementing many of the lower level form components such as labels, validations, and hints.


A basic form field in intial state
<Field label="Your email"> <Input placeholder="" /> </Field>

Field with validation

A field with an input with validations
Your email was not valid
<Field label="Your email" validations={[ { message: 'Your email was not valid' } ]} > <Input placeholder="" /> </Field>

Field with required status

Adds an asterisk to display that a field is required
<Field label="Your email" required={true} > <Input placeholder="" /> </Field>

Field with locked status

A lock icon can be shown to signify that the input is locked
<Field label="Your email" locked={true} > <Input placeholder="" /> </Field>

Field with action label

A secondary action label can be added
Show map
<Field label="Your home city" labelAction={<Text onClick={function noRefCheck() {}} size="extra-small">Show map</Text>} > <Input placeholder="London" /> </Field>

Field with hint

Useful for providing information about what the input is required for
This will become your login username
<Field hint="This will become your login username" hintIcon="info" label="Your email" > <Input placeholder="" /> </Field>

Inline field

Displays the field with the label and input on the same line
<Field inline={true} label="Your email" labelWidth={100} > <Input placeholder="" /> </Field>