Skip to main content
Input allows users to enter text, numbers, dates, and other data. It supports icons, variants, and customizable focus behavior.

​
Basic Usage

import { Input } from "@soft-ui/react/input"

function Example() {
  return <Input placeholder="Enter your name" />
}

​
Variants

Two variants control the input’s visual style:
  • secondary - Solid background (default)
  • tertiary - Translucent background with subtle shadow
import { Input } from "@soft-ui/react/input"

function Example() {
  return (
    <>
      <Input variant="secondary" placeholder="Secondary" />
      <Input variant="tertiary" placeholder="Tertiary" />
    </>
  )
}

​
Sizes

Three sizes are available: s, m (default), and l. 
import { Input } from "@soft-ui/react/input"

function Example() {
  return (
    <>
      <Input size="s" placeholder="Small" />
      <Input size="m" placeholder="Medium" />
      <Input size="l" placeholder="Large" />
    </>
  )
}

​
Focus Behavior

By default, Input only shows focus ring when using keyboard navigation (focusVisibleOnly={true}). Set to false to always show focus ring on focus: 
import { Input } from "@soft-ui/react/input"

function Example() {
  return (
    <Input
      placeholder="Keyboard focus only"
      focusVisibleOnly={true}
    />
  )
}
The entire input container is clickable and will focus the internal input element.

​
Disabled State

import { Input } from "@soft-ui/react/input"

function Example() {
  return (
    <Input
      placeholder="Disabled input"
      disabled
    />
  )
}

​
API Reference

For complete prop documentation, see the Input API reference.

Build docs developers (and LLMs) love

Get started for freeTalk to us