Input

View in Lexicon

This section demonstrates the different text input types.

installyarn add @clayui/form
versionNPM Version
useimport {ClayCheckbox} from '@clayui/form';

Table of Contents

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

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Form, {ClayInput} from '@clayui/form';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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>
	);
}

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:

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Form, {ClayInput} from '@clayui/form';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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>
	);
}

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>>

Input

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" | "sm" | "regular" | undefined

Selects the height of the input.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

Input

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" | "sm" | "regular" | undefined

Selects the height of the input.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub

Contributors

Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Krešimir Čoko, Patrick Yeo

Last edited January 29, 2025 at 2:16:40 AM

Table of Contents