Input

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.