FormControl

import { FormControl } from '@concur/nui-widgets';

Form controls are used to gather input from a user. Note it can emit <input>, <select> or any other type of HTML form element, depending on the value of its componentClass property. Best practice is to use this component as a child of FormGroup.

Examples

Sizes - Input

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

<FormControl />

<FormControl size='md' />

<FormControl size='sm' />

Sizes - Select

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

<FormControl componentClass='select'>
    <option value='first'>Select Value</option>
    <option value='other'>...</option>
</FormControl>

<FormControl componentClass='select' size='md'>
    <option value='first'>Select Value</option>
    <option value='other'>...</option>
</FormControl>

<FormControl componentClass='select' size='sm'>
    <option value='first'>Select Value</option>
    <option value='other'>...</option>
</FormControl>

Usage

Properties

Property Type Default Description
bsClass String 'form-control' Base CSS class and prefix for the component. One should not generally change bsClass except to add new, non-Bootstrap CSS styles to a component.
className String   Any custom classes to add to the <input> or <select> componentClass element.
componentClass Element 'input' Often 'input' or 'select', but any valid HTML form element can be supplied.
id String   Sets the id attribute on the <input> or <select> componentClass element. If used within a FormGroup, the controlId property will be used. This property overrides that.
inputRef Function   Attaches a ref 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' Type of form control to emit. Options are 'text', 'select'.
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.