Text Input Component

All five states. Focus is a native browser state — shown here using .focused for documentation.

Select / Dropdown Component

Native <select> styled as .input.select. Pass type:"select" with an options array and optional placeholder.

Textarea Component

Multi-line text input. Uses .input directly with type:"textarea". Set rows to control initial height; vertically resizable.

Toggle Switch Component

Binary on/off control. Renders with role="switch" + aria-checked for accessibility. Pass checked: true/false and optional onLabel/offLabel.

Checkbox Component

Native <input type="checkbox"> styled with Alpine fill on checked state. Supports checked, unchecked, and indeterminate states. Always pair with a visible label.

Radio Button Component

Single-select from a group. Pass type:"radio" with an options array and a name to group the controls. Set value to pre-select an option.

Input Adornments Component

Wrap any text input with a leading icon, trailing icon, prefix, suffix, or clear button via buildInputAdornment(). Covers search fields, currency inputs, URL fields, and clearable inputs.

Multi-select with Chips Component

Multi-value select field that displays each selection as a removable chip inside the input. Click to open dropdown; type to filter. Uses buildMultiSelect() via .bsn-multiselect-mount.

Combobox / Typeahead Component

Single-select searchable dropdown. Type to filter the option list; selecting a value stores it in a hidden field. Clear button appears after selection. Uses buildCombobox() via .bsn-combobox-mount.

Number Input Component

Native <input type="number"> styled as .input.input-narrow. Spinners are intentionally visible — they let users increment numeric values without keyboard input (e.g., seat counts, pricing). Use min, max, and step attributes directly.

Segmented Control Component

Mutually exclusive option group rendered as a connected pill strip. For use inside forms and settings panels. Uses buildSegmentedControl() via .bsn-segmented-mount. Use Pill Tabs for list filtering — Segmented Control is a form element, not a filter.

File Upload Component

Drag-and-drop zone with click-to-browse fallback. Use mediaType: "image" or "video" for media uploads — these swap in the appropriate placeholder icon and sensible accept/hint defaults. The default "file" variant uses a cloud-upload icon for generic file uploads.

Date & Time Inputs Component

Native date and time pickers styled with DS tokens via buildForm(). Use type:"date", type:"time", or type:"datetime-local". Browser chrome varies by OS — restrict to admin and settings contexts.

Searchable Checklist Picker Component

Scrollable, searchable checklist for multi-select from a large option set. Used in the Pack editor for "Specific accounts" assignment. Uses buildPickerList() via .bsn-picker-list-mount.