Field | Surflane

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

No preview action taken.

Usage

Connect a label, description, and error to an input. Inside the same Field, the shared Input or Select can replace Field.Control.

Don't use a placeholder in place of a label. Use Field.Label instead. Don't show errors with color alone. Write the message in Field.Error.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Field.Root → Label + Control (or Input / Select) + Description + Error

Keyboard and accessibility

Clicking the label focuses the input. Submitting the form moves focus to the first invalid input. aria-describedby links the description and error to the input.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Field } from '@surflane/ui'

<Field.Root name='project'>
  <Field.Label>Project name</Field.Label>
  <Field.Control required placeholder='demo-e2e-01' />
  <Field.Description>Use a unique name.</Field.Description>
  <Field.Error />
</Field.Root>

Key API

Field — common wrapper props
Prop	Contract	Default
`Root.name / disabled / invalid`	Base UI field state	— / false / —
`Root.validationMode`	onSubmit \| onBlur \| onChange	onSubmit
`Error.match`	ValidityState key \| boolean	automatic

The table lists the common wrapper's main props. See the package type declarations for the full types.