@clayui/form

---

title: 'Form' description: 'Forms obtain user data and transmit it to the system to either store the data, produce an action, or both.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/' packageNpm: '@clayui/form' sibling: 'docs/components/css-form-group.html'

import {Form, FormValidation, FormText} from '$packages/clay-form/docs/index';

• Validation
• Group Caption
• API

Use ClayForm components for composing forms.

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

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:

Group Caption

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

API

Form.FeedbackIndicator

[APITable "clay-form/src/Form.tsx#ClayFormFeedbackIndicator"]

Form.Group

[APITable "clay-form/src/Form.tsx#ClayFormGroup"]

Form

Extends from {`React.HTMLAttributes`}

Form.FeedbackGroup

Extends from {`React.HTMLAttributes`}

Form.FeedbackItem

Extends from {`React.HTMLAttributes`}

Form.Text

Extends from {`React.HTMLAttributes`}