Input

Fluid UI forms offers a simple and flexible way to build forms. It is built on top of Formik. Input field is a basic input field that can be used to input text, numbers, and other types of data. It supports field validation through Formik's API or Yup schema.

Input Example

Basic Example

import { Input } from '@fluid-design/fluid-ui';
const Example = () => {
  return (
    <Form
      initialValues={{
        name: '',
      }}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      <Input name='name' placeholder='Enter your name' type='text' />
    </Form>
  );
};

With validation

Fluid UI forms uses Formik under the hood, which means you can use Formik's API and Yup schema to validate your fields. You can read more about validation at the Form Validation page.

import { Form, Input, SubmitButton } from '@fluid-design/fluid-ui';
import { useState } from 'react';
import * as Yup from 'yup';
const InputExample = () => {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const validationSchema = Yup.object().shape({
    name: Yup.string().required('Name is required'),
    email: Yup.string().email('Email is invalid').required('Email is required'),
    password: Yup.string()
      .required('Password is required')
      .min(8, 'Password must be at least 8 characters'),
  });
  return (
    <div>
      <Form
        initialValues={{
          name: '',
          email: '',
          password: '',
        }}
        validationSchema={validationSchema}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            setSubmitting(false); // change Formik state to false after 2 seconds
            setIsSubmitted(true); // Optional: change state to show form is submitted
            setTimeout(() => {
              setIsSubmitted(false); // Optional: reset the isLoaded state to false after 2 seconds
            }, 2000);
          }, 2000);
        }}
      >
        <Input name='name' label='Name' type='text' />
        <Input name='email' label='Email' type='email' />
        <Input name='password' label='Password' type='password' />
        <SubmitButton
          weight='outline'
          className='w-full'
          isLoaded={isSubmitted}
          loadedOptions={{
            className: 'text-green-500',
          }}
        >
          Submit
        </SubmitButton>
      </Form>
    </div>
  );
};

State tracking

Fluid UI forms tracks all of the fields inside without needing manual state management. To ensure the values are connected correctly, you'll need to set the initialValues keys the same as each of your input field name prop.

import { Form, Input, SubmitButton } from '@fluid-design/fluid-ui';
<Form
  initialValues={{
    age: 1,
  }}
  onSubmit={(values) => {
    console.log(values);
  }}
>
  {/* Make sure the name is the same as the initialValues key */}
  <Input name='age' label='Age' type='number' />
  <SubmitButton>Submit</SubmitButton>
</Form>;

Component API

Prop	Default	Description
`name`	-	`String` Input field name
`label`		`String` Input field label, if not provided, the label will be the same as the name
`placeholder`		`String` Input field placeholder, if label is not provided, this will replace the label field
`description`		`String` Input field description showing under this field