Input
This section demonstrates the different text input types.
install | yarn add @clayui/form |
---|---|
version | 3.107.0 |
Stable3.107.0View in LexiconCHANGELOG
ClayInput
is exported from the @clayui/form
package, consisting of some low-level utilities that provides the ability to create Inputs and Input Groups.
Basic Usage
Using another elements as an input
If you want to use another component instead of input for enter text typed things, you can just pass this tag to component
property, like the example below:
Groups
If you want to create groups of inputs, use <ClayInput.Group>
, <ClayInput.GroupInsetItem>
, <ClayInput.GroupItem>
and <ClayInput.GroupText>
.
Separated
Wrap each item in a <ClayInput.Group>
with <ClayInput.GroupItem>
. If you want to make an item shrink to fit, use shrink
property.
Connected
For creating a connected input group, use prepend
property for each <ClayInput.GroupItem>
and for the last <ClayInput.GroupItem>
use the property append
.
Mixed
Stacked
For creating a stack of the items inside a item group, use stacked
property in the <ClayInput.Group>
and use shrink
property for using in screens sizes less than 576px.