Input

Stable

A single-line text field with sizes, affixes and validation states.

Use Input for short free-text values: names, emails, URLs, reference numbers. Wrap it in FormField to get a label, help text and error message wired up automatically. For multi-line text use Textarea; for numbers with steppers use NumberInput.

Source Edit docs Report an issue

Overview

Work email

We send signing requests to this address.

tsx

import { FormField, Input } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <FormField label="Work email" description="We send signing requests to this address.">
        <Input type="email" autoComplete="email" placeholder="name@company.com" />
      </FormField>
    </div>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Work email

We send signing requests to this address.

Light

Work email

We send signing requests to this address.

Dark

Work email

We send signing requests to this address.

High contrast

Import

tsx

import { Input, FormField } from '@bindshq/stance-react';

Platforms

Input has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { Input, FormField } from '@bindshq/stance-react';

Playground

Organisation name

Shown on every email signature.

tsx

<Input />

Examples

Sizes

Heights match Button sizes so controls line up in toolbars.

tsx

import { Input } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 360 }}>
      <Input size="sm" aria-label="Small" placeholder="Small" />
      <Input size="md" aria-label="Medium" placeholder="Medium" />
      <Input size="lg" aria-label="Large" placeholder="Large" />
    </div>
  );
}

Prefix and suffix

Static text or icons inside the field box.

Company website

https://

Signature link

.esignify.com

tsx

import { FormField, Icon, Input } from '@bindshq/stance-react';

export function Affixes() {
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 360 }}>
      <FormField label="Company website">
        <Input prefix="https://" placeholder="binds.si" />
      </FormField>
      <FormField label="Signature link">
        <Input prefix={<Icon name="link" />} suffix=".esignify.com" defaultValue="acme" />
      </FormField>
    </div>
  );
}

States

Contract reference

Reference must start with CT-

Account ID

Created by

tsx

import { FormField, Input } from '@bindshq/stance-react';

export function States() {
  return (
    <div style={{ display: 'grid', gap: 16, width: '100%', maxWidth: 360 }}>
      <FormField label="Contract reference" error="Reference must start with CT-">
        <Input defaultValue="2026-114" />
      </FormField>
      <FormField label="Account ID" disabled>
        <Input defaultValue="acc_81f2" />
      </FormField>
      <FormField label="Created by" readOnly>
        <Input defaultValue="Priya Raman" />
      </FormField>
    </div>
  );
}

API reference

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control height: 32, 40 or 48px.
`invalid`	`boolean`	None	Marks the field invalid. Set automatically inside a FormField with an error.
`prefix`	`ReactNode`	None	Content before the text, inside the field box.
`suffix`	`ReactNode`	None	Content after the text, inside the field box.
`wrapperClassName`	`string`	None	Class for the outer box; className goes to the <input>.
`type`	`string`	`'text'`	Native input type.
`...props`	`InputHTMLAttributes`	None	All native input attributes; the ref targets the <input>.

Accessibility

Always give the input a visible label via FormField, or aria-label when a visible label is genuinely redundant.
Inside FormField the input receives id, aria-describedby (description and error), aria-invalid, required and disabled automatically.
Placeholders are hints, not labels: they disappear on input and have lower contrast.
Focus is shown by a solid ring on the whole field box, including in high contrast mode.
Use the correct type and autoComplete (email, tel, url) to get the right mobile keyboard and autofill.

Keyboard

Keys	Action
`Tab`	Moves focus to and from the input.

Usage guidelines

Do

Size the field to the expected length of the value.
Explain format requirements in the description, before the user makes a mistake.

Don’t

Use placeholder text as the only label.
Disable paste on email or password fields.

Components Forms

Input

Stable

A single-line text field with sizes, affixes and validation states.

Source Edit docs Report an issue

Overview

Work email

We send signing requests to this address.

tsx

import { FormField, Input } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <FormField label="Work email" description="We send signing requests to this address.">
        <Input type="email" autoComplete="email" placeholder="name@company.com" />
      </FormField>
    </div>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Work email

We send signing requests to this address.

Light

Work email

We send signing requests to this address.

Dark

Work email

We send signing requests to this address.

High contrast

Import

tsx

import { Input, FormField } from '@bindshq/stance-react';

Platforms

Input has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { Input, FormField } from '@bindshq/stance-react';

Playground

Organisation name

Shown on every email signature.

tsx

<Input />

Examples

Sizes

Heights match Button sizes so controls line up in toolbars.

tsx

import { Input } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 360 }}>
      <Input size="sm" aria-label="Small" placeholder="Small" />
      <Input size="md" aria-label="Medium" placeholder="Medium" />
      <Input size="lg" aria-label="Large" placeholder="Large" />
    </div>
  );
}

Prefix and suffix

Static text or icons inside the field box.

Company website

https://

Signature link

.esignify.com

tsx

import { FormField, Icon, Input } from '@bindshq/stance-react';

export function Affixes() {
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 360 }}>
      <FormField label="Company website">
        <Input prefix="https://" placeholder="binds.si" />
      </FormField>
      <FormField label="Signature link">
        <Input prefix={<Icon name="link" />} suffix=".esignify.com" defaultValue="acme" />
      </FormField>
    </div>
  );
}

States

Contract reference

Reference must start with CT-

Account ID

Created by

tsx

import { FormField, Input } from '@bindshq/stance-react';

export function States() {
  return (
    <div style={{ display: 'grid', gap: 16, width: '100%', maxWidth: 360 }}>
      <FormField label="Contract reference" error="Reference must start with CT-">
        <Input defaultValue="2026-114" />
      </FormField>
      <FormField label="Account ID" disabled>
        <Input defaultValue="acc_81f2" />
      </FormField>
      <FormField label="Created by" readOnly>
        <Input defaultValue="Priya Raman" />
      </FormField>
    </div>
  );
}

API reference

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control height: 32, 40 or 48px.
`invalid`	`boolean`	None	Marks the field invalid. Set automatically inside a FormField with an error.
`prefix`	`ReactNode`	None	Content before the text, inside the field box.
`suffix`	`ReactNode`	None	Content after the text, inside the field box.
`wrapperClassName`	`string`	None	Class for the outer box; className goes to the <input>.
`type`	`string`	`'text'`	Native input type.
`...props`	`InputHTMLAttributes`	None	All native input attributes; the ref targets the <input>.

Accessibility

Always give the input a visible label via FormField, or aria-label when a visible label is genuinely redundant.
Inside FormField the input receives id, aria-describedby (description and error), aria-invalid, required and disabled automatically.
Placeholders are hints, not labels: they disappear on input and have lower contrast.
Focus is shown by a solid ring on the whole field box, including in high contrast mode.
Use the correct type and autoComplete (email, tel, url) to get the right mobile keyboard and autofill.

Keyboard

Keys	Action
`Tab`	Moves focus to and from the input.

Usage guidelines

Do

Size the field to the expected length of the value.
Explain format requirements in the description, before the user makes a mistake.

Don’t

Use placeholder text as the only label.
Disable paste on email or password fields.

Overview

Light, dark and high contrast

Import

Platforms

Playground

Examples

Sizes

Prefix and suffix

States

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Platforms

Playground

Examples

Sizes

Prefix and suffix

States

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related