Form

Basic Form

Full name

Email

Password

Gender (Optional)

Male

Female

Description (Optional)

Internet

3G

4G

import { Form } from 'chic-ui';

const SampleForm = () => {
  const onSubmit = (values: any) => {
    console.log('Submitted data: ', values);
  };

  return (
    <div style={{ width: '300px' }}>
      <Form onSubmit={onSubmit}>
        <Form.Input
          placeholder="Enter your full name"
          name="fullname"
          label="Full name"
          required
        />

        <Form.Input
          placeholder="Enter your email"
          name="email"
          label="Email"
          required
          validate={[isEmail('Invalid email.')]}
        />

        <Form.Input
          type="password"
          placeholder="Enter your password"
          name="password"
          label="Password"
          required
          validate={[
            isStrongPassword(
              'Password must be at least 8 characters, 1 lower case characters, 1 upper case characters, 1 numbers and 1 symbols'
            ),
          ]}
        />

        <Form.RadioGroup label="Gender" name="gender">
          <Form.Radio value="male" label="Male" />
          <Form.Radio value="female" label="Female" />
        </Form.RadioGroup>

        <Form.Input
          label="Description"
          name="bio"
          placeholder="Enter your bio"
          rows={5}
        />

        <Form.CheckboxGroup label="Internet" required>
          <Form.Checkbox label="3G" value="3g" name="internet" id="3g" />
          <Form.Checkbox label="4G" value="4g" name="internet" id="4g" />
        </Form.CheckboxGroup>

        <Form.SubmitButton>Submit</Form.SubmitButton>
      </Form>
    </div>
  );
};

API

Form

import { Form } from 'chic-ui';

Name	Type	Default	Description
children (required)	React Node		Children of form
onSubmit			Function to call on form submit

Form.Input

import { Form } from 'chic-ui';

Name	Type	Default	Description
label (required)	string		Label for input
placeholder	string		Placeholder for input
rows	string | number		Number of rows for input
required	boolean	false	Required input
name	string		Name for input
type	string	'text'	Type of input
validate	any[]		Input validation

Form.Radio

import { Form } from 'chic-ui';

Name	Type	Default	Description
label (required)	string		Label for radio
value (required)	string		Value for radio

Form.RadioGroup

import { Form } from 'chic-ui';

Name	Type	Default	Description
name	string		Name for radio group
label	string		Label for radio group
required	booleam		Required radio group
children (required)	ReactNode		Children for radio group

Form.Checkbox

import { Form } from 'chic-ui';

Name	Type	Default	Description
name (required)	string		Name for checkbox
label (required)	string		Label for checkbox
value (required)	string		Value for checkbox
id (required)	string		Id for checkbox

Form.CheckboxGroup

import { Form } from 'chic-ui';

Name	Type	Default	Description
name	string		Name for checkbox group
label	string		Label for checkbox group
required	booleam		Required checkbox group
children (required)	ReactNode		Children for checkbox group

Form.SubmitButton

import { Form } from 'chic-ui';

children

ReactNode

Children for submit button