This section demonstrates the different text input types.
install yarn add @clayui/form version use import {ClayCheckbox } from '@clayui/form' ;
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
import {Provider } from '@clayui/core' ;
import Form , {ClayInput } from '@clayui/form' ;
import React , {useState } from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<Form . Group >
<label htmlFor = "basicInputText" >Name</label >
<ClayInput
id = "basicInputText"
placeholder = "Insert your name here"
type = "text"
/>
</Form . Group >
</div >
</Provider >
);
}Show code
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:
import {Provider } from '@clayui/core' ;
import Form , {ClayInput } from '@clayui/form' ;
import React , {useState } from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<Form . Group >
<label htmlFor = "basicInputText" >Name</label >
<ClayInput
component = "textarea"
id = "basicInputText"
placeholder = "Insert your name here"
type = "text"
/>
</Form . Group >
</div >
</Provider >
);
}Show code API Reference
GroupItem React .ForwardRefExoticComponent < IGroupItemProps & React .RefAttributes < HTMLDivElement >>
Parameters Properties append boolean | undefined
Flag to indicate if input - group - append
class should
be applied
prepend boolean | undefined
Flag to indicate if input - group - prepend
class should
be applied
shrink boolean | undefined
Flag to indicate if input - group - item - shrink
class should
be applied
Returns ReactElement<any, string | JSXElementConstructor<any>> | null
Group React .ForwardRefExoticComponent < IGroupProps & React .RefAttributes < HTMLDivElement >>
Parameters Properties small boolean | undefined
Flag to indicate if input - group - sm
class should
be applied
stacked boolean | undefined
Flag to indicate if input - group - stacked - sm - down
class
should be applied.
Returns ReactElement<any, string | JSXElementConstructor<any>> | null
GroupText React .ForwardRefExoticComponent < React .HTMLAttributes < HTMLDivElement > & React .RefAttributes < HTMLDivElement >>
IForwardRef < HTMLInputElement , IProps >
Parameters Properties component "input" | "textarea" | React .ForwardRefExoticComponent < any > | undefined
Input component to render. Can either be a string like ‘input’ or ‘textarea’ or a component.
insetAfter boolean | undefined
Flag to indicate if input - group - inset - after
class should be applied
insetBefore boolean | undefined
Flag to indicate if input - group - inset - before
class should be applied
sizing "lg" | "regular" | "sm" | undefined
Selects the height of the input.
Returns ReactElement<any, string | JSXElementConstructor<any>> | nullIForwardRef < HTMLInputElement , IProps >
Parameters Properties component "input" | "textarea" | React .ForwardRefExoticComponent < any > | undefined
Input component to render. Can either be a string like ‘input’ or ‘textarea’ or a component.
insetAfter boolean | undefined
Flag to indicate if input - group - inset - after
class should be applied
insetBefore boolean | undefined
Flag to indicate if input - group - inset - before
class should be applied
sizing "lg" | "regular" | "sm" | undefined
Selects the height of the input.
Returns ReactElement<any, string | JSXElementConstructor<any>> | nullEdit this page on GitHub Contributors
Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Krešimir Čoko, Patrick Yeo
Last edited May 9, 2025 at 6:15:38 AM