Affix Input

Input fields with text prefixes or suffixes. Use inline affixes for simple symbols (like currency) or separated affixes with dividers for longer text (like URL protocols or email domains).

Inline Prefix

Use an inline prefix for short symbols like currency that appear directly in the input without a divider.

import { TextInput } from '@/components'

<TextInput label="Price" prefix="$" placeholder="0.00" />

Separated Prefix

Use a separated prefix with a divider for longer text like URL protocols. Set prefixDivider to show the divider.

<TextInput
  label="Website"
  prefix="https://"
  prefixDivider
  placeholder="example.com"
/>

Separated Suffix

Suffixes are separated by default when provided. Use this for email domains, file extensions, or other trailing text.

<TextInput
  label="Email"
  suffix="@gmail.com"
  placeholder="username"
/>

Inline Suffix

For inline suffixes without a divider, set suffixDivider={false}.

<TextInput
  label="Weight"
  suffix="kg"
  suffixDivider={false}
  placeholder="0"
/>

Sizes

Affix inputs support all three sizes: small (36px), medium (40px, default), and large (44px).

States

Affix inputs support all standard input states including default, filled, error, and disabled.

Compound Components

For maximum flexibility, use the compound component API with Input.Prefix, Input.Suffix, and Input.Divider.

Inline Prefix (Compound)

import { Input } from '@/components'

<Input.Root>
  <Input.Label>Price</Input.Label>
  <Input.Field className="pl-0">
    <Input.Prefix>$</Input.Prefix>
    <Input.NativeInput placeholder="0.00" />
  </Input.Field>
</Input.Root>

Separated Prefix (Compound)

<Input.Root>
  <Input.Label>Website</Input.Label>
  <Input.Field className="pl-0">
    <Input.Prefix showDivider>https://</Input.Prefix>
    <Input.NativeInput placeholder="example.com" />
  </Input.Field>
</Input.Root>

Separated Suffix (Compound)

<Input.Root>
  <Input.Label>Email</Input.Label>
  <Input.Field className="pr-0">
    <Input.NativeInput placeholder="username" />
    <Input.Suffix showDivider>@gmail.com</Input.Suffix>
  </Input.Field>
</Input.Root>

All Variants Overview

API Reference

TextInput Affix Props

All other TextInput props (label, hint, error, size, etc.) are also supported.

Compound Components

When using compound components, add className="pl-0" to Input.Field for prefixes or className="pr-0" for suffixes to remove the default padding.