FieldControl
Form Structure

FieldControl

A form row that inherits the surrounding FormGroup's disabled and validation state, and hands its control a generated id via render prop.

Props

FieldControlProps props
PropTypeDefaultDescription
labelReactNode—Label for the form control.
childrenReactNode | (({ id, disabled, invalid }) => ReactNode)—The control or a render prop receiving id, disabled, and invalid from context.
hintReactNode—Dim helper line. Replaced by message when validation is active.
toneValidationTone—Overrides the group's tone for this row only.
messageReactNode—Validation message for this row. Overrides the group's message.
requiredboolean—Appends a red asterisk to the label.
disabledboolean—Disables the row. Defaults to the group's disabled state.
labelMetaReactNode—Right-aligned meta next to the label.

FieldControl extends HTMLAttributes<HTMLDivElement>.

Usage

Basic

FieldControl

With render prop

FieldControl render prop

With validation

FieldControl with validation
ImportTSX
import { FieldControl } from "@solarius/onset";
import type { FieldControlProps } from "@solarius/onset";

<FieldControl label="API key">
  <Input placeholder="sk_live_..." />
</FieldControl>

<FieldControl label="Endpoint URL" required>
  {({ id, invalid }) => (
    <Input id={id} invalid={invalid} placeholder="https://" />
  )}
</FieldControl>