---
title: Forms
subtitle: A guide to building forms with Base UI components.
description: A guide to building forms with Base UI components.
---
# Forms
A guide to building forms with Base UI components.
Base UI form control components extend the native [constraint validation API](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api) so you can build forms for collecting user input or providing control over an interface. They also integrate seamlessly with third-party libraries like [React Hook Form](/react/handbook/forms.md) and [TanStack Form](/react/handbook/forms.md).
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
'use client';
import * as React from 'react';
import { ChevronDown, ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
import { Button } from './button';
import { CheckboxGroup } from './checkbox-group';
import { Form } from './form';
import { RadioGroup } from './radio-group';
import { ToastProvider, useToastManager } from './toast';
import * as Autocomplete from './autocomplete';
import * as Checkbox from './checkbox';
import * as Combobox from './combobox';
import * as Field from './field';
import * as Fieldset from './fieldset';
import * as NumberField from './number-field';
import * as Radio from './radio';
import * as Select from './select';
import * as Slider from './slider';
import * as Switch from './switch';
function ExampleForm() {
const toastManager = useToastManager();
return (
);
}
export default function App() {
return (
);
}
function cartesian(...arrays: T): string[][] {
return arrays.reduce(
(acc, curr) => acc.flatMap((a) => curr.map((b) => [...a, b])),
[[]],
);
}
const REGIONS = cartesian(['us', 'eu', 'ap'], ['central', 'east', 'west'], ['1', '2', '3']).map(
(part) => part.join('-'),
);
interface Image {
url: string;
name: string;
}
/* prettier-ignore */
const IMAGES: Image[] = ['nginx:1.29-alpine', 'node:22-slim', 'postgres:18', 'redis:8.2.2-alpine'].map((name) => ({
url: `docker.io/library/${name}`,
name,
}));
const SERVER_TYPES = [
{ label: 'Select server type', value: null },
...cartesian(['t', 'm'], ['1', '2'], ['small', 'medium', 'large']).map((part) => {
const value = part.join('.').replace('.', '');
return { label: value, value };
}),
];
```
```tsx
/* button.tsx */
import * as React from 'react';
import { Button as BaseButton } from '@base-ui/react/button';
import clsx from 'clsx';
export function Button({ className, ...props }: React.ComponentPropsWithoutRef<'button'>) {
return (
);
}
```
```tsx
/* checkbox-group.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
export function CheckboxGroup({ className, ...props }: BaseCheckboxGroup.Props) {
return (
);
}
```
```tsx
/* form.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { Form as BaseForm } from '@base-ui/react/form';
export function Form({ className, ...props }: BaseForm.Props) {
return (
);
}
```
```tsx
/* radio-group.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
export function RadioGroup({ className, ...props }: BaseRadioGroup.Props) {
return (
);
}
```
```tsx
/* toast.tsx */
'use client';
import * as React from 'react';
import { Toast } from '@base-ui/react/toast';
import { X } from 'lucide-react';
function Toasts() {
const { toasts } = Toast.useToastManager();
return toasts.map((toast) => (
{JSON.stringify(toast.data, null, 2)}
));
}
export function ToastProvider(props: { children: React.ReactNode }) {
return (
{props.children}
);
}
export const useToastManager = Toast.useToastManager;
```
```tsx
/* autocomplete.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { Autocomplete } from '@base-ui/react/autocomplete';
export function Root(props: Autocomplete.Root.Props) {
return ;
}
export const Input = React.forwardRef(function Input(
{ className, ...props }: Autocomplete.Input.Props,
forwardedRef: React.ForwardedRef,
) {
return (
);
});
export function Portal(props: Autocomplete.Portal.Props) {
return ;
}
export function Positioner({ className, ...props }: Autocomplete.Positioner.Props) {
return (
);
}
export function Popup({ className, ...props }: Autocomplete.Popup.Props) {
return (
);
}
export function List(props: Autocomplete.List.Props) {
return ;
}
export function Item({ className, ...props }: Autocomplete.Item.Props) {
return (
);
}
```
```tsx
/* checkbox.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { Checkbox } from '@base-ui/react/checkbox';
export function Root({ className, ...props }: Checkbox.Root.Props) {
return (
);
}
export function Indicator({ className, ...props }: Checkbox.Indicator.Props) {
return (
);
}
```
```tsx
/* combobox.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { Combobox } from '@base-ui/react/combobox';
import { X } from 'lucide-react';
export function Root(props: Combobox.Root.Props) {
return ;
}
export const Input = React.forwardRef(function Input(
{ className, ...props }: Combobox.Input.Props,
forwardedRef: React.ForwardedRef,
) {
return (
);
});
export function Clear({ className, ...props }: Combobox.Clear.Props) {
return (
);
}
export function Trigger({ className, ...props }: Combobox.Trigger.Props) {
return (
);
}
export function Portal(props: Combobox.Portal.Props) {
return ;
}
export function Positioner({ className, ...props }: Combobox.Positioner.Props) {
return (
);
}
export function Popup({ className, ...props }: Combobox.Popup.Props) {
return (
);
}
export function Empty({ className, ...props }: Combobox.Empty.Props) {
return (
);
}
export function List({ className, ...props }: Combobox.List.Props) {
return (
);
}
export function Item({ className, ...props }: Combobox.Item.Props) {
return (
);
}
export function ItemIndicator({ className, ...props }: Combobox.ItemIndicator.Props) {
return ;
}
```
```tsx
/* field.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { Field } from '@base-ui/react/field';
export function Root({ className, ...props }: Field.Root.Props) {
return ;
}
export function Label({ className, ...props }: Field.Label.Props) {
return (
);
}
export function Description({ className, ...props }: Field.Description.Props) {
return ;
}
export const Control = React.forwardRef(
function FieldControl(
{ className, ...props }: Field.Control.Props,
forwardedRef: React.ForwardedRef,
) {
return (
);
},
);
export function Error({ className, ...props }: Field.Error.Props) {
return ;
}
export function Item(props: Field.Item.Props) {
return ;
}
```
```tsx
/* fieldset.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { Fieldset } from '@base-ui/react/fieldset';
export function Root(props: Fieldset.Root.Props) {
return ;
}
export function Legend({ className, ...props }: Fieldset.Legend.Props) {
return (
);
}
```
```tsx
/* number-field.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { NumberField } from '@base-ui/react/number-field';
export function Root({ className, ...props }: NumberField.Root.Props) {
return (
);
}
export function Group({ className, ...props }: NumberField.Group.Props) {
return ;
}
export function Decrement({ className, ...props }: NumberField.Decrement.Props) {
return (
);
}
export const Input = React.forwardRef(function Input(
{ className, ...props }: NumberField.Input.Props,
forwardedRef: React.ForwardedRef,
) {
return (
);
});
export function Increment({ className, ...props }: NumberField.Increment.Props) {
return (
);
}
```
```tsx
/* radio.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { Radio } from '@base-ui/react/radio';
export function Root({ className, ...props }: Radio.Root.Props) {
return (
);
}
export function Indicator({ className, ...props }: Radio.Indicator.Props) {
return (
);
}
```
```tsx
/* select.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { Select } from '@base-ui/react/select';
export function Root(props: Select.Root.Props) {
return ;
}
export function Trigger({ className, ...props }: Select.Trigger.Props) {
return (
);
}
export function Value({ className, ...props }: Select.Value.Props) {
return ;
}
export function Icon({ className, ...props }: Select.Icon.Props) {
return ;
}
export function Portal(props: Select.Portal.Props) {
return ;
}
export function Positioner({ className, ...props }: Select.Positioner.Props) {
return (
);
}
export function Popup({ className, ...props }: Select.Popup.Props) {
return (
);
}
export function ScrollUpArrow({ className, ...props }: Select.ScrollUpArrow.Props) {
return (
);
}
export function ScrollDownArrow({ className, ...props }: Select.ScrollDownArrow.Props) {
return (
);
}
export function List({ className, ...props }: Select.List.Props) {
return (
);
}
export function Item({ className, ...props }: Select.Item.Props) {
return (
);
}
export function ItemIndicator({ className, ...props }: Select.ItemIndicator.Props) {
return ;
}
export function ItemText({ className, ...props }: Select.ItemText.Props) {
return ;
}
```
```tsx
/* slider.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { Slider } from '@base-ui/react/slider';
export function Root({ className, ...props }: Slider.Root.Props) {
return ;
}
export function Value({ className, ...props }: Slider.Value.Props) {
return (
);
}
export function Control({ className, ...props }: Slider.Control.Props) {
return (
);
}
export function Track({ className, ...props }: Slider.Track.Props) {
return (
);
}
export function Indicator({ className, ...props }: Slider.Indicator.Props) {
return (
);
}
export function Thumb({ className, ...props }: Slider.Thumb.Props) {
return (
);
}
```
```tsx
/* switch.tsx */
import * as React from 'react';
import clsx from 'clsx';
import { Switch } from '@base-ui/react/switch';
export function Root({ className, ...props }: Switch.Root.Props) {
return (
);
}
export function Thumb({ className, ...props }: Switch.Thumb.Props) {
return (
);
}
```
## Naming form controls
Form controls must have an accessible name in order to be recognized by assistive technologies. `` and `` automatically assign the accessible name and description to their associated control:
```tsx {8-9, 14-15} title="Labeling select and slider"
import { Form } from '@base-ui/react/form';
import { Field } from '@base-ui/react/field';
import { Select } from '@base-ui/react/select';
import { Slider } from '@base-ui/react/slider';
;
```
You can implicitly label ``, `` and `` components by enclosing them with ``:
```tsx title="Implicitly labeling a switch"
import { Field } from '@base-ui/react/field';
import { Switch } from '@base-ui/react/switch';
Developer mode
Enables extra tools for web developers;
```
Compose `
{SERVER_TYPES.map(({ label, value: serverType }) => {
return (
{label}
);
})}
{error?.message}
)}
/>
(
Number of instances{error?.message}
)}
/>
(
}
>
Scaling threshold
)}
/>
(
}
>
Storage type
SSD
HDD
)}
/>
(
Restart on failure
)}
/>
(
}>
Allowed network protocols