> For the complete documentation index, see [llms.txt](https://docs.rooks.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rooks.ai/build-and-publish-forms/form-component-reference.md). # Form Component Reference Explore the components Rooks can use to collect answers, present information, and organize your form. A form component is an element placed on a page. Some components collect answers, while others provide information or structure. You can ask the Rooks assistant to add a component by describing what you want to collect or display. To modify an existing component, use you can select it in **Outline**, then describe the change in the chat bar. ### How Rooks components are built Rooks form components are built using accessible, low-level UI primitives from shadcn. Rooks combines and extends those primitives with form-specific capabilities such as validation, answer storage, optionality, conditional visibility, file uploads, and signatures. This foundation gives users and the Rooks assistant a familiar vocabulary while preserving Rooks-specific behavior. When requesting changes, you can refer to the Rooks component names in this reference—for example, request an **Address** component when adding or modifying an address field. ### Answer components Answer components collect information from the person completing your form. Answers for these fields are required unless you ask Rooks to make them **optional**.

Component	Capabilities
Short text	Collects a single line of text. It can include a prefix, suffix, or custom validation pattern.
Long text	Provides a larger field for comments, explanations, and other longer answers.
Email	Collects and validates an email address. It can also collect multiple email addresses.
Phone	Collects and validates a US phone number using a formatted phone input.
ZIP code	Collects and validates a five-digit numerical string.
SSN	Collects a US Social Security number using a formatted input and validates its structure.
Number	Collects a numeric answer and can enforce a minimum value, maximum value, or both. Prefixes and suffixes can provide additional context, such as `$` or `%`.
Date	Allows someone to enter a date or select one from a calendar. Answers can be limited to past or future dates.
Date and time	Collects a date and time using separate controls. Answers can be limited to the past or future.
Single choice	Allows someone to select one answer from a set of choices. Choices can appear as buttons, a searchable dropdown, or a standard dropdown.
Multiple choice	Allows someone to select more than one answer using checkboxes or a searchable dropdown.
Yes/No	Presents a choice between Yes and No.
Address	Collects either a single-line address or separate fields for the street address, city, state, ZIP code, and country. Address validation applies only when these separate fields are used.
Confirmation	Provides a single checkbox for confirming an acknowledgement, agreement, or statement.
File upload	Allows someone to select or drag and drop a file. Uploaded files can be previewed or removed before continuing.
Image upload	Allows someone to upload an image and preview or remove it before continuing.
Signature	Allows someone to type or draw a signature and enter the legal name associated with it.
Grouped fields	Keeps related answer components together, such as several fields describing one household member.
Repeating group	Allows a group of fields to repeat freely, a fixed number of times, or according to an earlier numeric answer or variable.

### Answer types and subtypes Every answer component stores its response in a variable. Rooks assigns that variable a data type based on the component used to collect the answer. | Data type | Used for | | ----------- | -------------------------------------------------------------------------------------------------------- | | **String** | Text and specially formatted text, including email addresses, phone numbers, ZIP codes, and dates | | **Number** | Numeric answers that can be used in calculations or compared as numbers | | **Boolean** | True or False answers, such as Yes/No and confirmation components | | **Object** | Structured answers containing multiple related values, such as addresses, signatures, and grouped fields | An answer can also be a list of values. This occurs when a component accepts multiple answers or a group is repeated. {% hint style="info" icon="square-info" %} Some component’s data type cannot be changed independently of the component. For example, a **Number** component produces a numeric answer. To collect numbers as text - such as an identifier containing leading zeroes - use a **Text** component instead. {% endhint %} #### Subtypes A subtype adds more specific meaning to an answer without changing its underlying data type. Rooks uses subtypes to apply the appropriate validation, formatting, and response handling.

Subtype	Base type	Purpose
Email	String	Identifies and validates an email address
Phone	String	Identifies and validates a phone number
Date	String	Stores a date in a consistent format
Date and time	String	Stores a date and time in a consistent format
Address	Object	Stores the separate parts of an address together
File reference	String	Identifies an uploaded file or image
Signature	Object	Stores a signature and its associated signing information

Rooks assigns the subtype when the component is created. Renaming a Text component to “Email address,” for example, does not give it the validation or formatting of an **Email** component. ### Content components Content components present information without collecting an answer. | Component | Capabilities | | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Statement** | Displays instructions, explanations, headings, links, or other informational text. Standard Markdown formatting is supported. | | **Image** | Displays an image with alternative text for accessibility. | | **Inline Next or Submit button** | Places a custom or conditionally visible navigation button within the page. Pages already include a standard navigation button, so this component is only needed for a customized experience. | ### Component formatting Component labels and statements can use Markdown to add formatting such as headings, bold text, italics, links, and lists. For example, you can ask: > Make “Contact information” a second-level heading. > Add a link to our privacy policy beneath the email component. ### Optional components Answer components are **required** by default. Ask the form assistant to make a component optional when someone should be allowed to leave it unanswered. For example: > Make the phone component optional. Content components do not collect answers and are not treated as required or optional. ### Conditional components Questions, statements, images, and other components can be shown or hidden using conditional visibility. The condition can use earlier answers, calculated variables, or external variables passed into the form. For example: > Show the company-name component when the person selects “Business.” [Conditional logic](/build-and-publish-forms/create-a-form.md) controls whether the component is rendered. It does not jump the person directly to a particular component or page.