TextField

v0.1.3

Labeled text input with size variants, helper/error text, and common HTML input event handlers.

Install

npx shadcn@latest add @signalos/text-field

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/utils, @signalos/skeleton) are pulled automatically.

Preview

Example & code

text-field.example.tsx

import * as React from "react"
import { Mail } from "lucide-react"

import { TextField } from "./TextField"

export default function Example() {
  const [email, setEmail] = React.useState("")

  return (
    <div className="max-w-sm">
      <TextField
        label="Email"
        type="email"
        placeholder="Enter your email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        leadingIcon={<Mail className="h-4 w-4" />}
        helperText="We'll never share your email."
      />
    </div>
  )
}

Props

BaseInputProps

Prop	Type	Default	Description
id	`string \| undefined`	-	Unique identifier for the input. Used to associate the input with a `<label>` using the `htmlFor` attribute.
name	`string \| undefined`	-	Name of the input. Used when submitting forms.
type	`HTMLInputTypeAttribute \| undefined`	-	Specifies the type of input. Common values: - `"text"` - `"email"` - `"password"` - `"number"` - `"search"` - `"tel"` - `"url"`
value	`string \| number \| readonly string[] \| undefined`	-	Current controlled value of the input.
defaultValue	`string \| number \| readonly string[] \| undefined`	-	Initial value for an uncontrolled input.
placeholder	`string \| undefined`	-	Placeholder text displayed when the input is empty.
disabled	`boolean \| undefined`	-	Disables the input. The user cannot edit or focus the field.
required	`boolean \| undefined`	-	Marks the field as required. Used for form validation.
readOnly	`boolean \| undefined`	-	Makes the input read-only. Users can focus and copy the value but cannot edit it.
autoComplete	`string \| undefined`	-	Enables browser autocomplete. Example: - `"email"` - `"username"` - `"current-password"`
autoFocus	`boolean \| undefined`	-	Automatically focuses the input when the component is mounted.
maxLength	`number \| undefined`	-	Maximum number of characters allowed.
minLength	`number \| undefined`	-	Minimum number of characters required.
min	`string \| number \| undefined`	-	Minimum numeric value. Used with number inputs.
max	`string \| number \| undefined`	-	Maximum numeric value. Used with number inputs.
step	`string \| number \| undefined`	-	Increment/decrement interval. Used with number inputs.
pattern	`string \| undefined`	-	Regular expression used for validation.
inputMode	`"text" \| "url" \| "none" \| "search" \| "tel" \| "email" \| "numeric" \| "decimal" \| undefined`	-	Hints the appropriate keyboard on mobile devices. Example: - `"numeric"` - `"decimal"` - `"email"`
onChange	`ChangeEventHandler<HTMLInputElement> \| undefined`	-	Called whenever the input value changes.
onFocus	`FocusEventHandler<HTMLInputElement> \| undefined`	-	Called when the input receives focus.
onBlur	`FocusEventHandler<HTMLInputElement> \| undefined`	-	Called when the input loses focus.
onKeyDown	`KeyboardEventHandler<HTMLInputElement> \| undefined`	-	Called when a keyboard key is pressed down.
onKeyUp	`KeyboardEventHandler<HTMLInputElement> \| undefined`	-	Called when a keyboard key is released.

TextFieldProps

Prop	Type	Default	Description
label	`ReactNode`	-	Label displayed above the input.
helperText	`ReactNode`	-	Helper text displayed below the input. Usually used for hints or descriptions.
error	`ReactNode`	-	Error message displayed below the input. Usually styled in red.
size	`TextFieldSize \| undefined`	-	Controls the overall size of the input. - `sm` → Small - `md` → Medium (default) - `lg` → Large
loading	`boolean \| undefined`	-	Displays a loading state. Typically shows a loading skeleton or spinner and disables interaction.
linkText	`ReactNode`	-	Optional clickable text displayed next to the label. Example: "Forgot Password?"
onLinkClick	`(() => void) \| undefined`	-	Callback fired when the link text is clicked.
leadingIcon	`ReactNode`	-	Icon displayed at the beginning of the input. Example: `<Search />`
trailingIcon	`ReactNode`	-	Icon displayed at the end of the input. Example: `<Eye />`
containerClassName	`string \| undefined`	-	Additional classes for the outer container.
labelClassName	`string \| undefined`	-	Additional classes for the label.
className	`string \| undefined`	-	Additional classes for the input element.
data-testid	`string \| undefined`	-	Test identifier used by automated testing tools. Example: `data-testid="email-input"`
id	`string \| undefined`	-	Unique identifier for the input. Used to associate the input with a `<label>` using the `htmlFor` attribute.
name	`string \| undefined`	-	Name of the input. Used when submitting forms.
type	`HTMLInputTypeAttribute \| undefined`	-	Specifies the type of input. Common values: - `"text"` - `"email"` - `"password"` - `"number"` - `"search"` - `"tel"` - `"url"`
value	`string \| number \| readonly string[] \| undefined`	-	Current controlled value of the input.
defaultValue	`string \| number \| readonly string[] \| undefined`	-	Initial value for an uncontrolled input.
placeholder	`string \| undefined`	-	Placeholder text displayed when the input is empty.
disabled	`boolean \| undefined`	-	Disables the input. The user cannot edit or focus the field.
required	`boolean \| undefined`	-	Marks the field as required. Used for form validation.
readOnly	`boolean \| undefined`	-	Makes the input read-only. Users can focus and copy the value but cannot edit it.
autoComplete	`string \| undefined`	-	Enables browser autocomplete. Example: - `"email"` - `"username"` - `"current-password"`
autoFocus	`boolean \| undefined`	-	Automatically focuses the input when the component is mounted.
maxLength	`number \| undefined`	-	Maximum number of characters allowed.
minLength	`number \| undefined`	-	Minimum number of characters required.
min	`string \| number \| undefined`	-	Minimum numeric value. Used with number inputs.
max	`string \| number \| undefined`	-	Maximum numeric value. Used with number inputs.
step	`string \| number \| undefined`	-	Increment/decrement interval. Used with number inputs.
pattern	`string \| undefined`	-	Regular expression used for validation.
inputMode	`"text" \| "url" \| "none" \| "search" \| "tel" \| "email" \| "numeric" \| "decimal" \| undefined`	-	Hints the appropriate keyboard on mobile devices. Example: - `"numeric"` - `"decimal"` - `"email"`
onChange	`ChangeEventHandler<HTMLInputElement> \| undefined`	-	Called whenever the input value changes.
onFocus	`FocusEventHandler<HTMLInputElement> \| undefined`	-	Called when the input receives focus.
onBlur	`FocusEventHandler<HTMLInputElement> \| undefined`	-	Called when the input loses focus.
onKeyDown	`KeyboardEventHandler<HTMLInputElement> \| undefined`	-	Called when a keyboard key is pressed down.
onKeyUp	`KeyboardEventHandler<HTMLInputElement> \| undefined`	-	Called when a keyboard key is released.

Supporting types

export type TextFieldSize = "sm" | "md" | "lg"

npm dependencies

lucide-react@^1.7.0

Changelog

text-field

0.1.3

Conditional rendering added for the error and help-text slots.

0.1.2

Content sync fix to bring source in line with published registry payload.

0.1.1

Minor updates.

0.1.0

Initial release.