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>
	);
}

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

Last edited March 12, 2025 at 5:21:21 PM

Table of Contents

Validation
Group Caption