The default text input for email addresses. Shows label, placeholder, validation, and helper text.
'use client'; import { useState } from 'react';import { TextInput } from '@sdaia/ui'; Phone Number
Uses a bordered prefix slot to display a country code selector before the input.
'use client'; import { useState } from 'react';import { TextInput } from '@sdaia/ui'; Sale Amount
Uses a bordered suffix slot to display the currency code (e.g., SAR) after the input value.
'use client'; import { useState } from 'react';import { TextInput } from '@sdaia/ui'; Website
Uses a bordered prefix slot to display the protocol (http://) before the URL input.
'use client'; import { useState } from 'react';import { TextInput } from '@sdaia/ui'; Card Prefix
Uses a prefix slot with a card brand icon (e.g., VISA) before the card number input.
'use client'; import { useState } from 'react';import { TextInput } from '@sdaia/ui'; Copy Action
Uses a bordered suffix slot with a copy-to-clipboard button for quick value copying.
'use client'; import { useState } from 'react';import { TextInput } from '@sdaia/ui'; Multi-value input using tag chips inside the input container. Tags can be added via keyboard and removed individually.
'use client'; import { useState } from 'react';import { TextInput } from '@sdaia/ui';import type { TagItem } from '@sdaia/ui';Uses a suffix slot with an action button for inline form submission.
'use client'; import { useState } from 'react';import { TextInput } from '@sdaia/ui'; Props
Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text displayed above the input. |
helperText | string | — | Helper text displayed below the input. |
error | string | — | Error message — replaces helperText and turns the border red. |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the input. |
prefix | ReactNode | — | Content rendered before the input (icon, text, dropdown). |
suffix | ReactNode | — | Content rendered after the input (icon, button, text). |
prefixBordered | boolean | false | Adds a visual separator border on the prefix end edge. |
suffixBordered | boolean | false | Adds a visual separator border on the suffix start edge. |
clearable | boolean | false | Shows a clear button when the input has a value. |
onClear | () => void | — | Callback fired when the clear button is clicked. |
tags | TagItem[] | — | Tag chips rendered inside the input container for multi-value input. |
onTagRemove | (id: string) => void | — | Callback fired when a tag remove button is clicked. |
disabled | boolean | false | Disables the input and prevents interaction. |
fullWidth | boolean | false | Makes the input take the full width of its container. |