Input | 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

Name

Read only

Project ID

Check the project ID.

Disabled

Usage

Enter short, single-line text. Keep the label visible after the user types.

Don't use the placeholder as the only label. Add a visible label instead. Describe errors in text associated with the input.

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

Anatomy

Field.Root → Field.Label + Input wrapper(leadingIcon? + input) + Field.Description? / Field.Error

Keyboard and accessibility

Tab moves focus. Native text editing and Korean IME input keep working.

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, Input } from '@surflane/ui'

<Field.Root>
  <Field.Label>Project name</Field.Label>
  <Input name='project' placeholder='Enter a name' />
</Field.Root>
<Field.Root invalid>
  <Field.Label>Project ID</Field.Label>
  <Input name='project-id' aria-invalid='true' />
  <Field.Error match>Check the project ID.</Field.Error>
</Field.Root>

Key API

Input — common wrapper props
Prop	Contract	Default
`leadingIcon`	ReactNode	—
`mono`	sets the value in the code face at the control's size, for identifiers, keys and paths read character by character	false
`wrapperClassName`	string	—
`name / required / readOnly / disabled`	native input props	—

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