Single and multi-line text fields with icons, prefixes and states.
Read-only values to copy: a field with a copy button that ticks, a reveal toggle for secrets, a block of lines with copy and download, and a bare copy button.
motion · lucide-react
Three values to paste into an identity provider.
Eight codes in two columns with copy and download.
IDs in a list, each with its own copy button.
A text field in outline, soft and underline styles with icons, prefixes, suffixes, inline buttons, sizes and invalid and disabled states.
lucide-react
A plain outline field.
outline (default), soft and underline.
leading and trailing take icons.
Text before and after the value, like a protocol or a unit.
A show/hide toggle in the trailing slot.
invalid tints the field; pair it with a message.
sm, md (default) and lg.
A locked field, and type="file" with a styled button.
Multi-line text in outline and soft styles that can grow with its content, count characters and carry a toolbar.
Three rows by default.
variant="soft": filled, no border.
autoGrow grows with the text up to maxRows.
showCount with maxLength turns amber near the limit.
invalid with a message, and a disabled field.
