NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

FormControl

import FormControl from '@concur/nui-widgets/lib/Forms/FormControl';

Form controls are used to gather input from a user. Note it can emit an <input> element. Best practice is to use this component as a child of FormGroup.

Examples

Sizes

Three sizes are supported: 'lg' (default), 'md' and 'sm'. Use the size property to set the size.

<FormGroup
    controlId={shortid.generate()}>
    <ControlLabel>Large</ControlLabel>
    <FormControl />
</FormGroup>

<FormGroup
    controlId={shortid.generate()}
    size='md'>
    <ControlLabel>Medium</ControlLabel>
    <FormControl />
</FormGroup>

<FormGroup 
    controlId={shortid.generate()}
    size='sm'>
    <ControlLabel>Small</ControlLabel>
    <FormControl />
</FormGroup>

Disabled State

Set the disabled property to change the FormControl’s state to disabled. A disabled element is unusable and un-clickable.

<FormGroup 
    controlId={shortid.generate()}
    disabled>
    <ControlLabel>Disabled</ControlLabel>
    <FormControl />
</FormGroup>

ReadOnly State

Set the readOnly property to change the FormControl’s state to readOnly. A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.

<FormGroup
    controlId={shortid.generate()}
    readOnly>
    <ControlLabel>Read-only</ControlLabel>
    <FormControl />
</FormGroup>

Usage

Properties

Property Type Default Description
className String   Any custom classes to add to the <input> element.
disabled Boolean false Controls whether the component is enabled or disabled.
id String   Sets the id attribute on the <input> element. If used within a FormGroup, the controlId property will be used. This property overrides that.
inputRef Ref or Function   Attaches a ref to the <input> element.
readOnly Boolean false Adds the readonly attribute to the <input> element.
required Boolean false Adds the required attribute to the <input> element. NOTE: This does not perform any validation, but rather just marks the field as required.
size String 'lg' Size of the <input> element. Options are 'lg', 'md', 'sm'.
type String 'text' Sets the type attribute on the <input> element. Options are 'number', 'password', 'text'.
validationMessageState String   If used in conjunction with field validation, this provides the icon next to the label. Options are 'error', 'warning'.

Callbacks

Property Parameters Description
onBlur event Callback function for onBlur events.
onFocus event Callback function for onFocus events.