Forms
48 components.
Form
Angle SliderA circular angle picker dial with a draggable handle on the circumference for selecting an angle in degrees (0..360). ButtonActionable button with variants, sizes, and a loading state. Button GroupGroups multiple buttons into a single segmented control. CascaderA multi-level cascading select that lets the user drill through nested option columns to pick a leaf path. Chat InputChat composer with an auto-expanding textarea and a send button, where Enter sends and Shift+Enter inserts a line break. CheckboxAccessible checkbox for boolean options. Color PickerSwatch button that opens a popover with a preset palette, a native color picker, and a hex field. ComboboxAutocomplete field that filters a list of options as the user types. CronA cron expression builder and visualizer for standard 5-field expressions, with a preset selector and live human-readable description. FieldWraps a form control with a label, description, and error message. File DropzoneDrag-and-drop upload area that lists the selected files as removable chips. FormA form orchestrator that wraps a slotted native form or bare pura inputs, gathers named values, runs validation, and dispatches a submit CustomEvent while preventing native navigation. Inline EditA click-to-edit text component that shows a read-only value and swaps into an input or textarea in place on click, with confirm and cancel actions. InputText field with a label, hint, and validation state. Input GroupGroups a text field with prefixes and suffixes inside a single container with a shared border. Input OTPSingle-digit fields for one-time codes (OTP), with auto-advance and smart paste. Json InputA textarea specialized for JSON that validates on blur, shows an error state with the parse message when invalid, and provides a Format button to pretty-print valid JSON. KnobA rotary knob input rendered as an SVG circular dial with a track arc and a value arc, supporting drag, wheel, and keyboard interactions. LabelA form label that focuses and activates the associated control when clicked. Markdown EditorA split editor with a markdown textarea and a live rendered preview, including a toolbar for inserting common markdown syntax and a self-contained zero-dependency markdown renderer. Mask InputA text input that enforces a format mask as the user types, with tokens 9 for digit, A for letter, and * for alphanumeric, and auto-insertion of literal characters. MentionText field (input or textarea) with an inline autocomplete popup that opens when a trigger character is typed. Number InputA numeric field with increment and decrement buttons that clamps, snaps to the step, and exposes the value as a number. Password InputPassword field with a show/hide reveal toggle and an optional strength meter. RadioSingle radio button with a slotted label; group multiple radios by shared name attribute. Radio GroupGroups mutually exclusive radio options with keyboard navigation. Range SliderA range slider with two handles for selecting an interval between a minimum and a maximum. RatingA star rating control, keyboard accessible and exposed as an ARIA slider. Rich TextWYSIWYG rich-text editor with a formatting toolbar (bold, italic, underline, headings, lists, link, blockquote, code) and a contenteditable region. Search FieldSearch input with a leading magnifier icon and a trailing clear button, firing a debounced search event on input or immediately on Enter and clear. Segmented ControlAn iOS-style segmented control for single choice, with a sliding indicator under the active option. SelectA styled native select that is accessible and agent-readable. SignatureCanvas signature pad that captures pointer and touch strokes, HiDPI aware, with a clear button. SliderA slider control for selecting a numeric value within a range. Swatch PickerA grid of preset color chips to pick from, lighter than a full color picker. SwitchAn on/off toggle for flipping a setting, with an optional label. Tag InputA tag input field where the user types and presses Enter or comma to add removable chips. TextareaA multiline text field with a label, hint, and error state. ToggleTwo-state button that switches between on and off. Toggle GroupSegmented control of toggle buttons, with single or multiple selection. TransferDual-list transfer (shuttle) with two panels, checkboxes, and middle controls to move selected items between source and target. Tree SelectA select whose dropdown is a hierarchical tree for picking one or many nodes, with expandable branches, optional search, and multi-select support. UploadA managed file uploader with a drag-and-drop surface, file list with progress bars, status indicators, and an optional uploader function property.
Date
CalendarMonth calendar with date selection, navigation, and accessible keyboard support. Date PickerDate field that opens a calendar in a popover to pick a day. Date Range PickerA date range picker with a trigger that shows the formatted range and opens a popover with one or two month grids for selecting start and end dates. Datetime PickerA date and time picker that combines a calendar grid and hour/minute selects in a popover, with a value of "YYYY-MM-DDTHH:MM". Time PickerA time input that shows formatted selected time via a trigger and opens a popover with a scrollable list of selectable times stepped by minutes.