Learn 62 Form concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
A single-line field for short free-form text.
Create an accessible project name text input with a visible label, helpful placeholder, character limit, helper text, and clear focus, error, disabled, and read-only states.A multi-line field for longer free-form content.
Create an accessible project summary textarea with a visible label, helper text, a 240-character limit, a live character counter, and validation states.Collects and validates an email address.
Create an accessible email input with autocomplete, mobile-friendly keyboard behavior, inline validation, and an example showing the expected address format.Masks sensitive text while a person enters a password.
Create an accessible password input with show and hide controls, password-manager support, strength guidance, Caps Lock feedback, and clear requirements.Accepts a query used to find or filter content.
Create an accessible search input with a descriptive label, search icon, clear button, keyboard shortcut hint, debounced results, and empty and loading states.Collects a phone number with an appropriate mobile keyboard.
Create an accessible international telephone input with country code selection, an example format, mobile tel keyboard support, and forgiving validation.Collects and validates a web address.
Create an accessible website URL input with a clear example, URL keyboard support on mobile, protocol handling, and an inline invalid-address message.Collects a short one-time code or personal identification number.
Create an accessible six-digit one-time-code input that supports paste, SMS autofill, numeric keyboards, backspace navigation, expiration, resend, and a single understandable screen-reader label.Guides text into a required visual format such as an ID or card number.
Create an accessible masked membership-number input that accepts pasted text, does not trap the cursor, explains the required format, and validates the unformatted value.Collects a monetary amount with currency context and formatting.
Create an accessible currency input with a visible currency prefix, locale-aware grouping and decimals, paste support, min and max validation, and an unformatted numeric value for submission.Turns entered values into removable chips or tokens.
Create an accessible tag input where Enter and comma add tags, Backspace removes the last tag, duplicates are prevented, suggestions are available, and every chip has a labeled remove action.Edits formatted content using a toolbar and document area.
Create an accessible rich text editor with semantic headings and lists, keyboard shortcuts, labeled toolbar controls, paste cleanup, link editing, word count, and a plain-text fallback.Lets people choose one option from a compact list.
Create an accessible country select with a visible label, optional placeholder, sensible default, validation message, and native keyboard behavior.A searchable popup list that accepts typing and selection.
Create an accessible customer combobox following the ARIA combobox pattern, with keyboard navigation, asynchronous search, loading and empty states, highlighted matches, and a clear button.Suggests predefined values while still allowing free-form text.
Create a native datalist-backed browser input that suggests common values, still accepts custom text, has a visible label, and validates the final value when needed.Lets people select more than one option from a list.
Create an accessible multi-select listbox with clear selected states, keyboard selection, search for long lists, select-all and clear actions, and a concise selection summary.Turns one independent option on or off.
Create an accessible checkbox with a large clickable label, clear checked, unchecked, disabled, and focus states, plus helper text when the consequence needs explanation.Allows any number of choices from a related set.
Create an accessible checkbox group inside a fieldset with a legend, optional selection limits, group-level validation, and a clear layout for long labels.Represents checked, unchecked, and partially selected states.
Create an accessible parent checkbox that reflects checked, unchecked, and indeterminate child selections, announces its mixed state, and supports keyboard toggling.Lets people choose exactly one option from a small visible set.
Create an accessible radio group inside a fieldset with a legend, one clear default when appropriate, arrow-key navigation, and group-level validation.Immediately turns a setting on or off.
Create an accessible toggle switch for email notifications with a persistent label, immediate on and off feedback, keyboard support, and visible focus styling.Shows a small set of mutually exclusive choices in one compact row.
Create an accessible segmented control for List, Grid, and Board views using the correct radio or tab semantics, arrow-key support, a clear selected state, and responsive wrapping.Moves items between available and selected collections.
Create an accessible transfer list with searchable available and selected panels, item counts, move and reorder actions, keyboard support, and a mobile-friendly alternative.Selects several options from a dropdown and shows them as removable values.
Create an accessible multi-select dropdown for project members with search, checkbox options, selected-value chips, select-all and clear actions, keyboard navigation, a selection count, and a responsive mobile presentation.Suggests matching values while people type, while optionally allowing new text.
Create an accessible city autocomplete with debounced suggestions, highlighted matches, keyboard navigation, loading and no-result states, free-text rules, recent searches, and clear selection feedback.Selects a path through related levels of hierarchical options.
Create an accessible location cascader for country, state, and city with column-by-column keyboard navigation, lazy-loaded children, a visible selected path, search, loading and empty states, and a mobile drill-down view.Selects one or more values from expandable hierarchical branches.
Create an accessible tree select for team permissions with expandable branches, parent and child checkboxes, indeterminate states, search, keyboard tree navigation, selected chips, and a concise selection summary.Lets people enter or choose one calendar date.
Create an accessible date picker with a text-entry fallback, locale-aware format hint, month navigation, full keyboard controls, disabled dates, and a clear selected date.Selects related start and end dates.
Create an accessible date range picker with separate labeled start and end fields, keyboard-friendly calendars, minimum-stay rules, unavailable dates, and a readable range summary.Collects a time of day.
Create an accessible time picker with keyboard entry, 12-hour or 24-hour localization, minute intervals, min and max times, and an explicit time-zone note.Collects a local date and time as one logical value.
Create an accessible date and time picker using clearly labeled date and time fields, locale-aware formatting, time-zone context, validation for past values, and a readable confirmation.Collects a month and year without a specific day.
Create an accessible month and year picker with a native input where supported, a labeled fallback, min and max months, and locale-aware display.Collects a numbered week within a year.
Create an accessible week picker that shows the exact date range represented by each week, handles locale-specific week numbering, validates limits, and provides a browser fallback.Chooses an IANA time zone for scheduling and display.
Create an accessible searchable time-zone selector that defaults from the browser, shows city names and current UTC offsets, accounts for daylight-saving changes, and stores IANA zone identifiers.Collects a numeric value with optional limits and increments.
Create an accessible number input for team size with a visible label, min, max, and step rules, numeric mobile keyboard support, and friendly out-of-range validation.Adjusts a number with increment and decrement controls.
Create an accessible quantity spinbutton with labeled minus and plus buttons, editable numeric text, min and max limits, keyboard controls, and an announced current value.Chooses one approximate numeric value along a continuous track.
Create an accessible budget slider with keyboard controls, min, max, and step values, a visible current value, formatted units, useful tick marks, and a numeric input alternative.Selects a minimum and maximum value on one track.
Create an accessible two-thumb price range slider with individual labels and keyboard control for each thumb, non-crossing constraints, live formatted values, and paired numeric fields.Collects a proportional value with an explicit percent unit.
Create an accessible percentage input with a visible percent suffix, decimal support, a documented stored-value convention, min and max validation, and locale-aware formatting.Collects a score, commonly displayed as stars or a numbered scale.
Create an accessible five-star rating input using radio semantics, arrow-key navigation, hover and selected states, descriptive labels for every score, and a clear no-rating option.Lets people select one or more files from their device.
Create an accessible file upload with a native file input, accepted file types, size and quantity limits, selected file names, upload progress, retry, remove, and clear errors.Adds a drop target while retaining a normal file picker.
Create an accessible drag-and-drop upload area with an equally prominent keyboard-operated file picker, drag-over feedback, type and size validation, upload progress, retry, and remove actions.Uploads images and shows previews or editing controls.
Create an accessible image upload with camera and file options on mobile, preview, crop and rotate tools, alt-text input where relevant, file validation, progress, replace, and remove actions.Selects a color visually or by a precise color value.
Create an accessible brand color picker with a native color input, editable hex value, preset swatches, live preview, clear focus states, and contrast guidance.Captures a drawn or typed signature.
Create an accessible signature field with draw, type, and upload options, keyboard-operable clear and undo actions, touch and pointer support, a preview, consent text, and server-side validation.Triggers an action without submitting or navigating by default.
Create an accessible action button with concise verb-first text, the correct button type, visible hover, focus, pressed, disabled, and loading states, and duplicate-action protection.Validates and sends the current form.
Create an accessible form submit button with specific action text, native submit behavior, a loading state, duplicate-submit protection, validation focus management, and success and failure feedback.Restores fields to initial values and can easily cause accidental data loss.
If a reset action is truly necessary, create a low-emphasis accessible Clear form button that explains its scope, asks for confirmation when data would be lost, and provides an undo path where possible.Names a control and creates its accessible relationship.
Create a persistent visible label correctly associated with its form control, with concise wording, a generous click target, and required or optional status expressed in text.Explains format, constraints, or consequences before input.
Create concise helper text below a field that explains only the information needed to answer, is programmatically associated with the control, and remains present when an error appears.Communicates whether a field must be completed.
Create a consistent required and optional field convention using visible words, not color or an unexplained asterisk alone, and connect required state to native validation and accessible properties.Groups related controls under one accessible question or heading.
Group related radio buttons, checkboxes, or address fields in a semantic fieldset with a clear legend, shared helper text, and group-level error handling.Adds contextual units or fixed text before or after an input.
Create an accessible amount input with a currency prefix and monthly suffix, clear visual grouping, one programmatic label, screen-reader-friendly unit text, and no loss of meaning at zoom.Shows how much text has been entered or remains available.
Create an accessible character counter for a textarea that shows the limit from the start, updates visually, announces only meaningful thresholds, handles pasted text, and explains over-limit validation.Places a specific field error or success message next to its control.
Create accessible inline validation that runs at an appropriate time, identifies the problem and correction in plain language, uses more than color, associates the message with the field, and preserves the entered value.Summarizes form errors and links people to each invalid field.
Create an accessible error summary at the top of a submitted form, move focus to its heading, list specific linked errors in field order, preserve all input, and keep matching inline messages.Groups primary, secondary, and destructive actions at the end of a form.
Create a responsive form action row with one clear primary submit button, a lower-emphasis cancel action, safe spacing from destructive actions, logical keyboard order, and stacked mobile behavior.Splits a long process into a sequence of manageable steps.
Create an accessible multi-step application form with named steps, current-step and progress text, back and continue controls, per-step validation, saved progress, review before submit, and safe browser history behavior.Appears only when an earlier answer makes it relevant.
Create an accessible conditional field revealed by a preceding choice, announce the newly available content, move no unexpected focus, clear or preserve hidden values intentionally, and validate only relevant controls.Shows a value that cannot be edited, with different focus and submission behavior.
Demonstrate accessible read-only and disabled fields, explain when to use each, retain sufficient contrast, communicate why editing is unavailable, and account for whether the value must be submitted.Displays a result calculated from one or more form values.
Create an accessible calculated total that updates from quantity and price inputs, uses the semantic output element, names the result, formats currency correctly, and announces changes without excessive interruption.