Component

TextField

A single-line text input with optional leading and trailing slots and a reset button.

preview

React
"use client";

import TextField from "@radui/ui/TextField";

const TextFieldExample = () => {
    return (
        <TextField.Root>
            <TextField.Input placeholder="Type here..." />
        </TextField.Root>
    )
}

export default TextFieldExample

Features

Composes a native input, so every native attribute and browser behaviour is available
Leading and trailing slots that forward focus to the input when clicked
Reset button that clears the value and returns focus, rendered only once there is a value
Accepts a ref directly on the input

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import TextField from "@radui/ui/TextField";

export default () => {
    return (
        <TextField.Root>
            <TextField.Slot side="start">
                @
            </TextField.Slot>
            <TextField.Input placeholder="Email" />
            <TextField.Reset>Clear</TextField.Reset>
        </TextField.Root>
    )
}

Root

The wrapper element that owns the input, slots and reset state.

Prop	Type	Default
customRootClass	string	""
className	string	--

Input

The native input element. Accepts every native input prop.

Prop	Type	Default
type	string	"text"
className	string	--
value	string	--
defaultValue	string	--
placeholder	string	--
disabled	boolean	false
readOnly	boolean	false
aria-label	string	--

Slot

A decorative leading or trailing container. Clicking it forwards focus to the input.

Prop	Type	Default
side	"start" \| "end"	--
className	string	--
children	ReactNode	--

Reset

Clears the input and returns focus to it. Renders hidden until the input has a value.

Prop	Type	Default
className	string	--
children	ReactNode	--
onClick	(event) => void	--

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus into and out of the input.
`Enter`	Submits the surrounding form when the input is inside one.

ARIA References

Reference	What Rad UI follows
Textbox role	Uses the native textbox role. Associate a label element or aria-label — a placeholder is not an accessible name.