Skip to main content

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

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

PropDefaultDescription
name-String

Input field name

labelString

Input field label, if not provided, the label will be the same as the name

placeholderString

Input field placeholder, if label is not provided, this will replace the label field

descriptionString

Input field description showing under this field