Form

Forms obtain user data and transmit it to the system to either store the data, produce an action, or both.

install	yarn add @clayui/form
version
use	`import ClayForm, {ClayInput} from '@clayui/form';`

Table of Contents

Validation
Group Caption

Use ClayForm components for composing forms.

For controlling groups inside forms, use ClayForm.Group components like the code below:

Open 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>
					<Form.Group className="form-group-sm">
						<label htmlFor="basicInput">Name</label>
						<ClayInput placeholder="Name" type="text"></ClayInput>
					</Form.Group>
					<Form.Group className="form-group-sm">
						<label htmlFor="basicInput">Description</label>
						<textarea
							className="form-control"
							placeholder="Description"
						></textarea>
					</Form.Group>
				</Form>
			</div>
		</Provider>
	);
}

Validation

.has-error, .has-success and .has-warning classes are used in ClayForm.Group to identifier validation state of the form group items.

Use ClayForm.FeedbackGroup and ClayForm.FeedbackItem for creating custom feedback messages for Form Groups.

ClayForm.FeedbackIndicator is used to apply an Icon on the feedback message, like the following example:

Open 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>
					<Form.Group className="has-success">
						<label htmlFor="basicInput">Name</label>
						<ClayInput placeholder="Name" type="text"></ClayInput>
						<Form.FeedbackGroup>
							<Form.FeedbackItem>
								This is a form-feedback-item.
							</Form.FeedbackItem>
							<Form.FeedbackItem>
								<Form.FeedbackIndicator symbol="check-circle-full" />
								This is a form-feedback-item with a check feedback
								indicator.
							</Form.FeedbackItem>
						</Form.FeedbackGroup>
					</Form.Group>
					<Form.Group className="has-warning">
						<label htmlFor="basicInput">Description</label>
						<textarea
							className="form-control"
							placeholder="Description"
						></textarea>
						<Form.FeedbackGroup>
							<Form.FeedbackItem>
								This is a form-feedback-item.
							</Form.FeedbackItem>
							<Form.FeedbackItem>
								<Form.FeedbackIndicator symbol="warning-full" />
								This is a form-feedback-item with a warning feedback
								indicator.
							</Form.FeedbackItem>
						</Form.FeedbackGroup>
					</Form.Group>
					<Form.Group className="has-error">
						<label htmlFor="basicInput">Password</label>
						<ClayInput
							placeholder="Name"
							type="password"
						></ClayInput>
						<Form.FeedbackGroup>
							<Form.FeedbackItem>
								This is a form-feedback-item.
							</Form.FeedbackItem>
							<Form.FeedbackItem>
								<Form.FeedbackIndicator symbol="exclamation-full" />
								This is a form-feedback-item with a error feedback
								indicator.
							</Form.FeedbackItem>
						</Form.FeedbackGroup>
					</Form.Group>
				</Form>
			</div>
		</Provider>
	);
}

Open Sandbox

import {Provider} from '@clayui/core';
import ClayForm from '@clayui/form';
import LocalizedInput from '@clayui/localized-input';
import React, {useState} from 'react';

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

export default function App() {
	const locales = [
		{
			label: 'en-US',
			symbol: 'en-us',
		},
		{
			label: 'es-ES',
			symbol: 'es-es',
		},
		{
			label: 'fr-FR',
			symbol: 'fr-fr',
		},
		{
			label: 'hr-HR',
			symbol: 'hr-hr',
		},
	];

	const [selectedLocaleError, setSelectedLocaleError] = useState(locales[0]);
	const [translationsError, setTranslationsError] = useState({
		'en-US': 'Apple',
		'es-ES': 'Manzana',
	});

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ClayForm.Group className="has-error">
					<LocalizedInput
						id="locale3"
						label="Localized Input Error State"
						locales={locales}
						onSelectedLocaleChange={setSelectedLocaleError}
						onTranslationsChange={setTranslationsError}
						selectedLocale={selectedLocaleError}
						translations={translationsError}
					/>
					<ClayForm.FeedbackGroup>
						<ClayForm.Text>Clay Form Text</ClayForm.Text>
						<ClayForm.FeedbackItem id="input-group-error">
							<ClayForm.FeedbackIndicator symbol="exclamation-full" />
							This is a description of the error!
						</ClayForm.FeedbackItem>
					</ClayForm.FeedbackGroup>
				</ClayForm.Group>
			</div>
		</Provider>
	);
}

Group Caption

Use ClayForm.Text for creating a caption on Form Groups.

Open 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>
					<Form.Group className="has-success">
						<label htmlFor="basicInput">Name</label>
						<ClayInput placeholder="Name" type="text"></ClayInput>
						<Form.FeedbackGroup>
							<Form.FeedbackItem>
								This is a form-feedback-item.
							</Form.FeedbackItem>
							<Form.Text>{''}</Form.Text>
						</Form.FeedbackGroup>
					</Form.Group>
				</Form>
			</div>
		</Provider>
	);
}

Edit this page on GitHub

Contributors

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

Last edited May 21, 2025 at 6:47:18 AM

Table of Contents

Validation
Group Caption