Input
yarn add @clayui/form
This section demonstrates the different text input types.
Stable3.32.0View in LexiconCHANGELOG
Input
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
component | 'input' | React.ForwardRefExoticComponent<any> | false | 'input' | Input component to render. Can either be a string like 'input' or a component. |
insetAfter | boolean | false | Flag to indicate if `input-group-inset-after` class should be applied | |
insetBefore | boolean | false | Flag to indicate if `input-group-inset-before` class should be applied | |
sizing | 'lg' | 'sm' | false | Selects the height of the input. | |
type | false | 'text' |
Input.Group
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
small | boolean | false | Flag to indicate if `input-group-sm` class should be applied | |
stacked | boolean | false | Flag to indicate if `input-group-stacked-sm-down` class should be applied. |
Input.GroupItem
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
append | boolean | false | Flag to indicate if `input-group-append` class should be applied | |
prepend | boolean | false | Flag to indicate if `input-group-prepend` class should be applied | |
shrink | boolean | false | Flag to indicate if `input-group-item-shrink` class should be applied |
Input.GroupInsetItem
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
after | boolean | false | Flag to indicate if `input-group-inset-item-after` class should be applied. | |
before | boolean | false | Flag to indicate if `input-group-inset-item-before` class should be applied. | |
tag | 'div' | 'span' | 'label' | false | 'div' | Name of container element |
Input.GroupText
Extends from React.HTMLAttributes<HTMLDivElement>