---
title: "Forms"
description: "The forms components of @arbol-ai/ui: Checkbox, Combo box, Field, Form, Form save bar, Number field, Radio group, Search field, Segmented control, Select, Slider, Switch, TanStack Form, Text field."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Forms

- [Checkbox](https://epidermis.getarbol.com/components/forms/checkbox/): A yes-or-no choice saved with a form, and CheckboxGroup for several options that make one list. Use Switch for settings that apply at once.
- [Combo box](https://epidermis.getarbol.com/components/forms/combo-box/): A choice from a long list, found by typing. It filters as the person types and says when nothing matches; the value is the chosen option id.
- [Field](https://epidermis.getarbol.com/components/forms/field/): The parts every field is made of: Label, Description, FieldError and FieldHelp (the description, replaced by the error while invalid). Field wraps a control that is not a React Aria field with them, and nativeFieldBox styles a native select or text area like the rest; FieldGroup holds an input and the buttons that act on it in one box.
- [Form](https://epidermis.getarbol.com/components/forms/form/): Stacks fields with even spacing and leaves validation to the app: fields show its messages, never the browser bubbles. validationErrors shows a server answer under each field; FormError says why the whole form was not saved.
- [Form save bar](https://epidermis.getarbol.com/components/forms/form-save-bar/): The SaveBar of a TanStack form (from the form entry): it shows while the values differ from the saved ones, is pending while the form saves, says why a save was refused, and Discard resets the form.
- [Number field](https://epidermis.getarbol.com/components/forms/number-field/): A number typed or stepped, formatted and parsed in the locale. Use formatOptions for currency, percentages and units.
- [Radio group](https://epidermis.getarbol.com/components/forms/radio-group/): One choice among a few options, all in view. Radio for short options, RadioCard for options that need a sentence of explanation.
- [Search field](https://epidermis.getarbol.com/components/forms/search-field/): A search box with a clear button; Escape clears it. debounceMs waits for a pause in typing before searching, and clearing searches at once.
- [Segmented control](https://epidermis.getarbol.com/components/forms/segmented-control/): One of 2–4 mutually exclusive options side by side, as a radio group: arrow keys move the choice and the thumb slides to it. Use Tabs to switch what a page shows.
- [Select](https://epidermis.getarbol.com/components/forms/select/): A choice from a list that opens from a trigger. The value is the chosen option id; selectionMode="multiple" takes several. Use ComboBox when the list is long enough to search.
- [Slider](https://epidermis.getarbol.com/components/forms/slider/): A value picked by dragging along a track, with its formatted value beside the label. Two values make a range whose thumbs never cross.
- [Switch](https://epidermis.getarbol.com/components/forms/switch/): An on/off setting that applies at once, with an optional label and description. Use Checkbox for a choice saved with a form.
- [TanStack Form](https://epidermis.getarbol.com/components/forms/app-form/): The fields bound to TanStack Form (from the form entry): declare the form once with useAppForm, and each field is one line that shows its value and its first error once touched. SubmitButton is pending while the form saves; FormError says why a submission was refused.
- [Text field](https://epidermis.getarbol.com/components/forms/text-field/): A labelled text box with its help and error message, in one line. Use multiline for notes; Input and TextArea are the boxes alone, for compositions of your own.

Source: https://epidermis.getarbol.com/components/forms/index.mdx