UI Gallery
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:
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.
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.
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.
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).
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.
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.
Input, Select, RadioGroup, CheckboxGroup, Slider, DatePicker
Inputs
DefinitionAn 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
DefinitionA 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
DefinitionA 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
DefinitionA 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
DefinitionA 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
DefinitionA 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
1
Define the purpose of your form
- 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”
2
Specify required information
- 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”
3
Choose input types
-
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”
4
Add or modify labels or hints
-
Request specific label or hint content if needed.
Ex. “Add reassuring privacy hints for sensitive data collection”
5
Define actions and next steps
-
Specify what actions users can take after filling the form
Ex. “Include both Submit and Cancel buttons”