ControlLabel
import ControlLabel from '@concur/nui-widgets/lib/Forms/ControlLabel';Control labels are used to identify form components such as FormControl, Checkbox, Password and TextArea. Best practice is to use this component as a child of FormGroup.
Examples
Sizes
Three sizes are supported: 'lg' (the default), 'md' and 'sm'. Use the size property to set the size.
<FormGroup
controlId={shortid.generate()}>
<ControlLabel>Large Label</ControlLabel>
<FormControl />
</FormGroup>
<FormGroup
controlId={shortid.generate()}
size='md'>
<ControlLabel>Medium Label</ControlLabel>
<FormControl />
</FormGroup>
<FormGroup
controlId={shortid.generate()}
size='sm'>
<ControlLabel>Small Label</ControlLabel>
<FormControl />
</FormGroup>Required
Use the required property to show visual indication with the label.
<FormGroup
controlId={shortid.generate()}
required>
<ControlLabel>Large Label</ControlLabel>
<FormControl />
</FormGroup>Usage
Properties
| Property | Type | Default | Description |
|---|---|---|---|
className | String | Any custom classes to add to the <label> element. | |
htmlFor | String | Sets the for attribute on the <label> element. If used within a FormGroup, the controlId property will be used. The htmlFor property overrides controlId. | |
required | Boolean | false | Appends the required field indicator (red asterisk) to the end of the label text. |
size | String | 'lg' | Size of the <label> element. Options are 'lg', 'md', 'sm'. |