> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thesys.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Form Elements
> Allow users to enter or select values within an interface to gather user intent for the system to respond with relevant actions or information.
**Includes:** `Input`, `Select`, `RadioGroup`, `CheckboxGroup`, `Slider`, `DatePicker`
## Inputs
**Definition**\
An input field is a form component that allows users to enter data directly, such as text, numbers, or other characters, by typing or pasting into the field.
**Uses**\
**-** Capture freeform data such as names, emails, phone numbers, or search queries.\
**-** Collect structured inputs like dates, times, passwords, or numeric values with formatting/validation.\
**-** Support longer responses for feedback, notes, or descriptions.
### Types
### Types of Text-Based Inputs
### Types of Numerical Inputs
### Anatomy
### Customize with Prompts
* **Specific Input Types:** Ask C1 to create input fields that accept only specific input types like numbers, letters, include special characters etc.
> Ex. *"Create an integer input for years of experience."*
* **Label, Placeholder, and Hint/Helper Text:** Ask C1 to use your specified label, placeholder, or helper text, or change their tone or specificity.
> Ex. *"Create a user feedback form with the placeholder 'Tell us your thoughts...' and the helper text 'This helps us make your experience better'."*
***
## Select
**Definition**\
A select input field is a form component that, when interacted with, displays a dropdown menu containing a predefined list of options.
**Uses**\
**-** Provides a clean, space-efficient way to present multiple finite choices to pick from.\
**-** Collecting standardized personal data from users.\
**-** Provide filtering and sorting options for content.\
**-** Preferences and settings options for users to select from.
***
### Types
### Anatomy
### Customize with Prompts
* **Dropdown Menu Structure:** Prompt C1 to create a dropdown menu with specified labels, grouped options and separators between each group.
> Ex. *"Create a support form with a dropdown for inquiry type. Organize options with labeled sections: 'Sales Questions' (General Sales, Pricing, Demos), 'Technical Support' (Bug Reports, Installation Help, Account Issues), and 'Business' (Partnerships, Billing, Refunds). Use separators between each section and arrange in logical order."*
* **Customize Select Field:** Use custom placeholder text and mention whether a specified option should be selected by default.
> Ex. *"Create a product order form for shipping method. Use custom placeholder 'Choose your preferred delivery option' and set 'Standard Shipping' as the default selection. Include options for Express, Standard, and Economy shipping."*
***
## Radio Group
**Definition**\
A radio group is a list of mutually exclusive options where the user can select one option from a given set.
**Uses**\
**-** Exposes all available options to the user upfront, reducing clicks and enabling easy comparison.\
**-** Leverages user familiarity to clearly indicate that only one option can be chosen.\
**-** Suitable for forms, settings, quizzes and surveys where only one valid answer is possible.
### Anatomy
### Customize with Prompts
* **Options and Labels:** Choose how many Radio Items should be displayed, their sequence and content.
> Ex. *"Create a radio group for size options, ordered from smallest to largest: XS, S, M, L, XL."*
* **Default Selection:** Specify whether an option should appear pre-selected in a Radio Group.
> Ex. *"Set 'Auto' as the default selected option."*
***
## Checkbox Group
**Definition**\
A checkbox UI component is an input element that lets users select or deselect one or more independent options from a set.
**Uses**\
**-** Checkbox groups with multiple items let users select one or more options from a given list.\
**-** Single checkboxes let users confirm agreement or consent, toggle preferences and enable/select optional features in a flow.\
**-** Let users perform administrative tasks like bulk actions (select multiple items to take action with).
### Anatomy
### Customize with Prompts
* **Checkbox Item Properties:** Specify the number and order of checkbox items, their content, and what sequence they should be arranged in.
> Ex. *"Create checkboxes for 3 meal preferences: Vegetarian, Vegan, Gluten-free"*
* **Default Selection:** Tell C1 whether a checkbox item(s) should be checked by default.
> Ex. *"Make the 'Agree to terms' checkbox pre-checked."*
***
## Slider
**Definition**\
A slider is a type of input field that lets users select a value or a range of values from a continuous pre-defined scale by dragging a handle along a track.
**Uses**\
**-** Adjusting settings like volume, brightness and intensity of states like image filters, zoom levels, playback speed, etc.\
**-** Filtering content by a range of values like price, age, date, distance radius, etc.\
**-** Timeline scrubbing, progress indicators, setting thresholds and inputs such as rating scales/satisfaction scores.
### Variants
### Anatomy
### Customize with Prompts
* **Slider Variant and Selection Type:** Choose the slider variant, continuous (smooth) or discrete (stepped), and selection mode (single value or range) that C1 should generate. In case of discrete sliders, define increment size.
> Ex. *"Add a continuous price range slider from \$0 to \$2000, default range \$200-\$800, for filtering laptops."*
* **Set Slider Limits and Values:** Specify the minimum and maximum values, whether negatives/decimals are allowed, and any default value or range.
> Ex. *"Add a star rating slider from 1.0 to 5.0 stars, allow half-star increments (0.5 steps)."*
* **Add Visual Cues:** Optionally, include icons on either end of the slider as visual indicators of its direction and function.
> Ex. *"Create a continuous zoom slider for image viewer.*
>
> * *Range: 10% to 500%*
> * *Default: 100%*
> * *Left icon: zoom-out (magnifying glass with minus)*
> * *Right icon: zoom-in (magnifying glass with plus)"*
***
## Date Picker
**Definition**\
A date picker is an input component that lets users select dates or a range of dates from a calendar interface that appears temporarily on interaction with a select field.
**Uses**\
**-** Eliminate user effort and errors of manual typing for a formatted input like date(s).\
**-** Let users enter personal data (birthdays, anniversaries, deadlines) etc.\
**-** Select date/start and end dates for booking and reservations.\
**-** Filter records/content by specific dates or ranges.\
**-** Selecting and managing important dates for records, contracts, regulatory compliance, and financial periods.
### Variants
### Anatomy
### Customize with Prompts
* **Selection Mode:** Specify whether the date picker should allow selecting a single date or a range of dates.
> Ex. *"Create a single date picker for selecting date of birth."*
* **Validation Rules:** Set a limit to the range of dates that can be selected, and how far in the past and future users would be allowed to make the selection.
> Ex. *"Add a single date picker for appointment dates that:*
>
> * *Allows dates starting from tomorrow (no same-day bookings)*
> * *Goes up to 6 months in the future maximum*
> * *Restricts selection to weekdays only"*
***
## How to Make Forms Using Form Elements
### Anatomy
* Who will use this form?
* What's the end goal?
* When and where will they encounter it?
> Ex. *"Build a contact form for support requests"*
* List the specific information you need to collect
* Include any choices, confirmations, or agreements the user needs to provide
> Ex. *"Create a registration form with username, email, password, confirm password, and agree to terms checkbox"*
* C1 chooses appropriate input types based on your field requirements, but you can customize if needed.
> Ex. *"Include a text area for detailed feedback rather than a single line"*
* Request specific label or hint content if needed.
> Ex. *"Add reassuring privacy hints for sensitive data collection"*
* Specify what actions users can take after filling the form
> Ex. *"Include both Submit and Cancel buttons"*