Text Input
A text input field that allows users to enter and edit single-line text.
'use client'; import { useState } from 'react';import { TextInput, Button } from 'sdaia-ui'; Installation
npx sdaia-ui@latest add text-input
Usage
import { TextInput } from "@/components/ui/input"<TextInput placeholder="Enter value..." />Examples
Default
The standard text input for general form use.
'use client'; import { useState } from 'react';import { TextInput } from 'sdaia-ui'; Search
Use `type="Search Box"` for search inputs with a leading icon and clear button.
'use client'; import { useState } from 'react';import { TextInput } from 'sdaia-ui'; With Trailing Button
Use `type="Trailing Button"` to combine the input with an inline action button.
'use client'; import { useState } from 'react';import { TextInput } from 'sdaia-ui'; Large
Use `size="Large"` for prominent placements.
'use client'; import { useState } from 'react';import { TextInput } from 'sdaia-ui'; Medium
Use `size="Medium"` for standard form density. This is the default.
'use client'; import { useState } from 'react';import { TextInput } from 'sdaia-ui'; Disabled
Use `state="Disabled"` to prevent interaction with the field.
'use client'; import { TextInput } from 'sdaia-ui'; function MailIcon() {API Reference
TextInputProps
Props for the TextInput component.
Prop | Type | Default | Required |
|---|---|---|---|
label | string | - | optional |
helperText | string | - | optional |
error | string | - | optional |
size | "medium" | "large" | "large" | optional |
prefix | ReactNode | - | optional |
suffix | ReactNode | - | optional |
prefixBordered | boolean | false | optional |
suffixBordered | boolean | false | optional |
clearable | boolean | false | optional |
onClear | () => void | - | optional |
tags | TagItem[] | - | optional |
onTagRemove | (id: string) => void | - | optional |
fullWidth | boolean | false | optional |