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:

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

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

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>
          <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 May 9, 2025 at 6:15:38 AM

Table of Contents

Validation
Group Caption