Control
Composition

Control

The bordered field shell shared by Onset's text-entry components: consistent borders, focus rings, and sizing across every input.

Behavior

Control is not a form control itself. It is the visual wrapper that provides the borders, backgrounds, hover treatments, focus rings, and sizing used by Input, Select, Textarea, NumberInput, Autocomplete, and TokenField.

Control props props
PropTypeDefaultDescription
asElementType"label"Defaults to label so clicking anywhere in the shell focuses the input inside.
size"sm" | "md" | "lg""md"Controls height, padding, font size, and radius.
disabledboolean—Muted appearance and no pointer events.
invalidboolean—Red border and red focus ring. Pair with aria-invalid on the inner input.
readOnlyboolean—Subtle background, no border highlight on hover.
fullWidthboolean—Fills the available width.
monoboolean—Monospace font for identifiers, hashes, and code.
autoHeightboolean—Height follows content instead of the size scale.
wrapboolean—Children wrap onto multiple rows. Implies autoHeight.
openboolean—Marks the shell as having an open popover attached.
leadingReactNode—Icon or node before the content.
trailingReactNode—Icon or node after the content.
prefixReactNode—Static text before the content, inside the border (e.g. $).
suffixReactNode—Static text after the content, inside the border (e.g. ms, %).

Sizes

Three sizes. The metrics are available programmatically via controlSize, a lookup that returns height, paddingX, gap, fontSize, and radius for each size. The same values are emitted as --m-control-height-sm, --m-control-padding-x-md, and so on.

Control / sm
Control / md
Control / lg

States

Control / disabled
Control / invalid
Control / readOnly

Building with Control

Wrap a custom input in Control to get Onset's focus ring and sizing: a date field, a currency picker, a duration entry, and so on.

The focus ring is driven by CSS variables: --m-focus-color (defaults to --m-color-primary), --m-focus-width, --m-focus-offset, --m-focus-outline, and --m-focus-ring. These are token-driven, so a product can restyle focus globally without touching any component.

Custom input with Control

A currency input built from Control and a native input:

CurrencyInput.tsxTSX
import { Control, controlInputClass } from "@solarius/onset";

export function CurrencyInput() {
  return (
    <Control prefix={<span>$</span>} suffix="USD" size="md">
      <input className={controlInputClass} placeholder="0.00" />
    </Control>
  );
}

CSS classes

Control exports three public CSS class strings for when you need to place elements yourself rather than going through the props.

Exported CSS classes props
PropTypeDefaultDescription
controlInputClassstring—Strips browser chrome from a bare <input>/<textarea> and inherits the shell's font.
controlAffixClassstring—Styles for a static text affix (prefix/suffix).
controlSlotClassstring—Styles for a leading/trailing icon slot.
Using the CSS classesTSX
<Control>
  <span className={controlSlotClass}>
    <Icon icon={IconSearch} />
  </span>
  <input className={controlInputClass} placeholder="Search..." />
  <span className={controlAffixClass}>ms</span>
</Control>

In most cases use the leading, trailing, prefix, and suffix props instead; they handle placement and spacing. Use the classes only when you need to place elements yourself.