Input
A single-line text input field built on Base UI’s Input primitive.
Base UI Primitive
Built on @base-ui/react/input
Import
import { Input } from "@soft-ui/react/input"
Usage
import { Input } from "@soft-ui/react/input"
import { RiSearchLine } from "@soft-ui/icons"
export default function Example() {
return (
<Input
placeholder="Search..."
leadingIcon={<RiSearchLine />}
/>
)
}
Props
size
's' | 'm' | 'l'
default:"'m'"
Control size. Affects height and padding.
s: 32px heightm: 36px heightl: 40px height
variant
'secondary' | 'tertiary'
default:"'secondary'"
Visual style variant.
secondary: Solid backgroundtertiary: Glass-morphic with backdrop blur
Icon or element displayed at the start of the input.
Icon or element displayed at the end of the input.
Only show focus ring on keyboard navigation (not mouse clicks).
Disables the input and applies disabled styles.
Placeholder text shown when input is empty.
HTML input type (text, email, password, etc.).
Uncontrolled default value.
onChange
(event: React.ChangeEvent<HTMLInputElement>) => void
Callback fired when value changes.
Additional CSS classes for the container.
Explicit escape hatch for intentional structural overrides.
Examples
With Icons
import { Input } from "@soft-ui/react/input"
import { RiSearchLine, RiCloseLine } from "@soft-ui/icons"
export default function WithIcons() {
return (
<Input
placeholder="Search..."
leadingIcon={<RiSearchLine />}
trailingIcon={<RiCloseLine />}
/>
)
}
Sizes
import { Input } from "@soft-ui/react/input"
export default function Sizes() {
return (
<div className="flex flex-col gap-4">
<Input size="s" placeholder="Small" />
<Input size="m" placeholder="Medium" />
<Input size="l" placeholder="Large" />
</div>
)
}
Variants
import { Input } from "@soft-ui/react/input"
export default function Variants() {
return (
<div className="flex flex-col gap-4">
<Input variant="secondary" placeholder="Secondary" />
<Input variant="tertiary" placeholder="Tertiary" />
</div>
)
}