The five text-entry controls (Input, SearchInput, PasswordInput, Textarea, and NumberInput) share the same visual shell, sizing, and invalid state handling. Each accepts standard HTML attributes for its native element.

Input

Input wraps a native <input> in the shared Control shell, with optional leading and trailing icon slots.

InputProps props

Prop	Type	Default	Description
`type`	`string`	`"text"`	text, password, email, number, etc.
`placeholder`	`string`	—	Placeholder text.
`value`	`string`	—	Controlled value.
`onChange`	`React.ChangeEventHandler`	—	Change handler.
`leftIcon`	`ReactNode`	—	Leading icon slot.
`rightIcon`	`ReactNode`	—	Trailing icon slot.
`size`	`"sm" \| "md"`	`"md"`	Control size.
`invalid`	`boolean`	—	Red border and focus ring.
`disabled`	`boolean`	—	Prevents interaction.
`readOnly`	`boolean`	—	Read-only, focusable.
`mono`	`boolean`	—	Monospace font.

Input

ImportTSX

import { Input } from "@solarius/onset";

<Input placeholder="Email" type="email" size="md" />
<Input leftIcon={<IconSearch size={13} />} placeholder="Search…" />
<Input invalid message="This field is required" />

SearchInput

SearchInput is Input with a built-in search icon and a default placeholder="Search…".

SearchInput

PasswordInput

PasswordInput is Input with a lock icon and a reveal toggle. The toggle is out of the tab order, so it never sits between the field and the submit button. Pair it with PasswordStrength wherever a password is being chosen rather than entered. Full page →

PasswordInput

Textarea

Multi-line text field in the same Control shell as Input.

TextareaProps props

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`onChange`	`React.ChangeEventHandler`	—	Change handler.
`rows`	`number`	—	Visible rows.
`placeholder`	`string`	—	Placeholder text.
`noResize`	`boolean`	—	Disable manual resizing.
`mono`	`boolean`	—	Monospace font.
`invalid`	`boolean`	—	Red border and focus ring.

Textarea

NumberInput

Numeric field with stepper buttons, arrow-key and scroll stepping, press-and-hold repeat, and a clamp on blur. Accepts optional prefix and suffix units.

NumberInputProps props

Prop	Type	Default	Description
`value`	`number \| null`	—	Controlled value.
`onChange`	`(value: number \| null) => void`	—	Change handler.
`min`	`number`	—	Minimum value.
`max`	`number`	—	Maximum value.
`step`	`number`	`1`	Step increment.
`shiftStep`	`number`	`10`	Step multiplier while Shift is held.
`prefix`	`ReactNode`	—	Static text before the number (e.g. '$').
`suffix`	`ReactNode`	—	Static text after the number (e.g. 'ms').
`hideStepper`	`boolean`	—	Hide the spinner buttons.

NumberInput

Selectors

Select

Select is a dropdown picker built from SelectTrigger + Popover + ContextMenu. Pick an option from a positioned list; the trigger label updates.

SelectProps props

Prop	Type	Default	Description
`options`	`SelectOption[]`	—	Available choices.
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Initial uncontrolled value.
`onChange`	`(value: string) => void`	—	Selection handler.
`placeholder`	`ReactNode`	—	Shown when nothing is selected.
`size`	`"sm" \| "md"`	`"md"`	Control size.

Select

SelectTrigger

SelectTrigger is the dropdown-style button used by Select. Use it directly when pairing with a custom DropdownMenu or Popover.

EnvSelect

EnvSelect is the environment picker from the topbar: a compact button with a toned StatusDot and caret. Pass a tone ("ok", "warn", "err", "idle", "prov") and children.

EnvSelect

Autocomplete

Free-text combobox: type to filter, ↑/↓ to move, Enter to commit. Supports grouping, remote search via onInputChange + disableFilter, and an inline "Create…" row.

AutocompleteProps props

Prop	Type	Default	Description
`options`	`AutocompleteOption[]`	—	Available choices.
`value`	`string \| null`	—	Currently selected value.
`onChange`	`(value: string \| null, option: AutocompleteOption \| null) => void`	—	Selection handler.
`inputValue`	`string`	—	Controlled query text (for remote search).
`onInputChange`	`(query: string) => void`	—	Query change handler.
`filter`	`(option, query) => boolean`	—	Custom filter function.
`disableFilter`	`boolean`	—	Skip local filtering (server-side).
`loading`	`boolean`	—	Shows a spinner.
`onCreate`	`(query: string) => void`	—	Show 'Create…' row.

Autocomplete

Choice inputs

Checkbox

Bare check box with no label. Use it as the base for CheckboxField and CheckboxGroup. Supports indeterminate for select-all headers.

CheckboxProps props

Prop	Type	Default	Description
`checked`	`boolean`	—	Checked state.
`onChange`	`(checked: boolean) => void`	—	Toggle handler.
`indeterminate`	`boolean`	—	Renders the mixed dash, aria-checked='mixed'.
`size`	`"sm" \| "md"`	`"sm"`	sm for table rows, md for form rows.
`disabled`	`boolean`	—	Prevents interaction.

Checkbox

CheckboxField

Labeled form checkbox that wraps a native <input type="checkbox"> for form and keyboard semantics. Supports a dim description line.

Enable notificationsMarketing emailsReceive weekly updates by email.

CheckboxField

CheckboxGroup

Multi-select checkbox list with an optional tri-state "select all" parent row.

CheckboxGroup

Radio / RadioGroup

Mutually-exclusive choice. Radio must live inside a RadioGroup. Supports inline layout via inline on the group.

HTTPHTTPSTCPRaw TCP connection

RadioGroup

Switch

Toggle switch for boolean settings, rendered as a role="switch" button.

SwitchProps props

Prop	Type	Default	Description
`checked`	`boolean`	—	On/off state.
`onChange`	`(checked: boolean) => void`	—	Toggle handler.
`disabled`	`boolean`	—	Prevents interaction.

Switch

Slider

Range slider with an optional numeric readout. The filled portion of the track uses the primary color.

SliderProps props

Prop	Type	Default	Description
`value`	`number`	—	Controlled value.
`defaultValue`	`number`	—	Initial uncontrolled value.
`onChange`	`(value: number) => void`	—	Change handler.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step increment.
`showValue`	`boolean \| (value: number) => string`	—	Show numeric readout.

Slider

SegmentedControl

Inline mutually-exclusive picker: a tighter alternative to Tabs for toolbar contexts like time range or view mode switching.

SegmentedControl

Rating

Read-only star display with fractional fills. Renders as role="img" with an accessible label.

RatingProps props

Prop	Type	Default	Description
`value`	`number`	—	Numeric rating.
`max`	`number`	`5`	Number of symbols.
`size`	`number`	`12`	Star size in px.
`label`	`ReactNode`	—	Dim trailing text (e.g. '4.6 · 218 reviews').
`color`	`string`	`var(--m-color-warn)`	Star color.

Rating

RatingInput

Interactive star input with hover preview, keyboard navigation, and optional labels text. Clicking the current value clears it (when clearable).

RatingInputProps props

Prop	Type	Default	Description
`value`	`number`	—	Controlled value.
`defaultValue`	`number`	—	Initial uncontrolled value.
`onChange`	`(value: number) => void`	—	Change handler.
`max`	`number`	`5`	Number of stars.
`clearable`	`boolean`	`true`	Clicking current value clears it to 0.
`labels`	`string[]`	—	Text for each level (index 0 = one star).

RatingInput

Other inputs

ColorPicker

Swatch trigger that opens an HSL picker with a saturation/lightness field, hue rail, hex entry, and preset swatches. Color is stored in HSL internally but the public value is always a #rrggbb string.

ColorPickerProps props

Prop	Type	Default	Description
`value`	`string`	—	Controlled hex color.
`defaultValue`	`string`	`"#7366ff"`	Initial uncontrolled color.
`onChange`	`(hex: string) => void`	—	Change handler.
`swatches`	`string[]`	`DEFAULT_SWATCHES`	Preset row. Pass [] to hide.
`showValue`	`boolean`	`true`	Show the hex next to the swatch.

ColorPicker

ImportTSX

import { ColorPicker, DEFAULT_SWATCHES } from "@solarius/onset";

<ColorPicker value="#7366ff" onChange={setColor} swatches={DEFAULT_SWATCHES} />;

TokenField

Multi-value tag input: type + Enter to add, Backspace to pop, with an optional suggestion dropdown.

TokenFieldProps props

Prop	Type	Default	Description
`values`	`string[]`	—	Controlled values.
`defaultValues`	`string[]`	—	Initial uncontrolled values.
`onChange`	`(values: string[]) => void`	—	Change handler.
`suggestions`	`string[]`	—	Dropdown suggestions as the user types.
`placeholder`	`string`	`"Add…"`	Placeholder text.
`allowCustom`	`boolean`	`true`	Allow values not in suggestions.

TokenField

FileUpload / Dropzone / FileList

Dropzone is the drag-and-drop + click-to-browse target. FileList renders uploaded-file rows with per-file progress and removal. FileUpload composes both. formatFileSize is exported for formatting bytes.

ImportTSX

import {
  Dropzone,
  FileList,
  FileUpload,
  formatFileSize,
} from "@solarius/onset";
import type { UploadFile } from "@solarius/onset";

TransferList

Dual-listbox assignment control: check items and move them across with arrow buttons. Commonly used for territory, role, and segment membership.

TransferListProps props

Prop	Type	Default	Description
`items`	`TransferItem[]`	—	All available items.
`targetIds`	`string[]`	—	Ids currently on the right (assigned) side.
`onChange`	`(targetIds: string[]) => void`	—	Assignment change handler.
`titles`	`[ReactNode, ReactNode]`	`["Available", "Assigned"]`	Column titles.
`searchable`	`boolean`	`true`	Show search boxes above each list.
`listHeight`	`number`	`168`	List body height in px.

Available4

Alice JohnsonEngineer

Carol DavisProduct

Dave WilsonEngineering

Eve BrownMarketing

Assigned1

Bob SmithDesigner

TransferList

File handling

Specimen examples for Dropzone, FileList, and FileUpload.

Drop files here or browse

Dropzone

config.yaml2.0 KB
data.csv100 KB
readme.mdInvalid format

FileList

Drop files here or browse

FileUpload

Date & time

DatePicker

Input-bound single-date picker: MiniCalendar in a popover, plus a text field you can type into. Supports presets for quick selection rows.

DatePickerProps props

Prop	Type	Default	Description
`value`	`Date \| null`	—	Controlled date.
`defaultValue`	`Date \| null`	—	Initial uncontrolled date.
`onChange`	`(date: Date \| null) => void`	—	Selection handler.
`min`	`Date`	—	Earliest selectable date.
`max`	`Date`	—	Latest selectable date.
`presets`	`{ label, date }[]`	`DEFAULT_DATE_PRESETS`	Quick rows above the calendar.
`placeholder`	`string`	`"Pick a date"`	Placeholder text.
`clearable`	`boolean`	`true`	Show a clear button.

DatePicker

ImportTSX

import { DatePicker, DEFAULT_DATE_PRESETS } from "@solarius/onset";

DateRangePicker

Preset-driven analytics range selector with a two-month MiniCalendar grid. Unlike DateRangeField, this is always populated; use it when a date range is required context (a dashboard, a report).

DateRangePicker

DateRangeField

Two-date variant bound to a single field: click to pick a start, click again for the end. Reads as a form control and can be empty. Use formatDateRange to display a DateRange in text.

DateRangeField

MiniCalendar

Compact month grid, standalone in a card or as the calendar half of the date pickers. Supports single-date selection or range highlighting via rangeStart/rangeEnd.

January 2000

MoTuWeThFrSaSu

MiniCalendar

Forms & Input

Components in this categoryCopy link

Text inputsCopy link

InputCopy link

SearchInputCopy link

PasswordInputCopy link

TextareaCopy link

NumberInputCopy link

SelectorsCopy link

SelectCopy link

SelectTriggerCopy link

EnvSelectCopy link

AutocompleteCopy link

Choice inputsCopy link

CheckboxCopy link

CheckboxFieldCopy link

CheckboxGroupCopy link

Radio / RadioGroupCopy link

SwitchCopy link

SliderCopy link

SegmentedControlCopy link

RatingCopy link

RatingCopy link

RatingInputCopy link

Other inputsCopy link

ColorPickerCopy link

TokenFieldCopy link

FileUpload / Dropzone / FileListCopy link

TransferListCopy link

File handlingCopy link

Date & timeCopy link

DatePickerCopy link

DateRangePickerCopy link

DateRangeFieldCopy link

MiniCalendarCopy link

Components in this category

Text inputs

Input

SearchInput

PasswordInput

Textarea

NumberInput

Selectors

Select

SelectTrigger

EnvSelect

Autocomplete

Choice inputs

Checkbox

CheckboxField

CheckboxGroup

Radio / RadioGroup

Switch

Slider

SegmentedControl

Rating

Rating

RatingInput

Other inputs

ColorPicker

TokenField

FileUpload / Dropzone / FileList

TransferList

File handling

Date & time

DatePicker

DateRangePicker

DateRangeField

MiniCalendar