Forms: advanced inputs
Sliders, steppers, codes, tags, pickers, uploads and validation, all springy and keyboard friendly.
Slider
Single range with a value bubble. Root .sf-slider + data-sf-slider; arrows, Home/End and Page keys work natively.
Range slider
Dual thumb with a minimum gap. Root .sf-rangeslider + data-sf-rangeslider; click the track to move the nearest thumb.
Number stepper
Plus/minus with a spring bump and press-and-hold repeat. Root .sf-stepper + data-sf-stepper, data-min, data-max, data-step.
OTP / PIN input
Auto-advance, paste a whole code, Backspace and arrow navigation, shake on error. Root .sf-otp + data-sf-otp. The first code verifies against data-sf-otp-expect: try 482913.
Password input
Show/hide eye and a four-segment strength meter. Root .sf-password + data-sf-password.
Search input
Icon, clear button and a keyboard-shortcut hint. Root .sf-searchbox + data-sf-search + data-sf-shortcut ("/" or "mod+k"). Press the key anywhere.
Tag / chip input
Type and press Enter or comma. Backspace twice removes the last chip; paste a comma list. Root .sf-taginput + data-sf-tags, data-max, data-value.
Combobox / autocomplete
Filtering listbox with aria-activedescendant. Arrow keys, Enter, Escape. Root .sf-combobox + data-sf-combobox + data-options (JSON).
Multi-select
Checkbox list in a popover with removable chips. Root .sf-multiselect + data-sf-multiselect, optional data-max. ArrowDown opens, Escape closes.
Date and time input
Native pickers dressed in Soft, with a round icon button that opens the picker. Root .sf-dateinput + data-sf-dateinput.
Colour swatch picker
Radio swatches with a spring selected ring and a custom colour slot. Root .sf-swatches + data-sf-swatches; set --sf-swatch per item.
Rating stars
Click, hover preview, keyboard (arrows, Home/End, digits). Root .sf-rating + data-sf-rating, data-half, data-readonly, data-value.
Radio cards and checkbox cards
Large selectable cards with a check badge. Root .sf-choice around a real radio or checkbox; wrap in .sf-choicegroup. CSS only.
File dropzone
Drag files in or browse. Uses the File API to read files in chunks for real progress; nothing is uploaded. Root .sf-dropzone + data-sf-dropzone, data-max-size, data-max-files.
Avatar uploader
Circular preview with a change overlay; click, drop an image on it, or remove. Root .sf-avatarup + data-sf-avatarup; size with --sf-avatarup-size.
Textarea with auto-grow and counter
Grows with content (capped by data-max-rows); the counter warns near the limit and turns danger past it. Root .sf-autogrow + data-sf-autogrow + data-limit.
Input group
Prefix and suffix addons, units, selects and inline buttons. Root .sf-igroup with __addon, __input, __select, __btn. CSS only.
Form layout helpers
Fieldset + legend, .sf-formrow grids, .sf-formsection with dividers and a sticky .sf-actionbar. Add data-sf-dirty to a form and the --dirty bar springs in after the first change.
Switch group / settings rows
Label, description and a toggle per row; clicking the row flips the switch. Root .sf-settings > .sf-setting using the core .sf-toggle.
- Email notificationsProduct news and account activity.
- Push notificationsGet a nudge when someone replies.
- Reduce motionSkip springs and other animation inside the app.
- Two-factor sign-inManaged by your organisation.
Segmented control, extended
Five or more options with icons; scrolls sideways on narrow screens and keeps the selection in view. Root .sf-segx + data-sf-segx; arrow keys move between options.
Inline editable text
Click to edit, Enter saves, Escape cancels, blur saves. Root .sf-editable + data-sf-editable; add data-multiline, data-required, data-placeholder.
Floating label and validation states
Labels float on focus or content; success, warning and error show an animated icon and sliding helper text. Root .sf-vfield[data-state] + .sf-float; add data-sf-fi-validate for live checks.