InputWithIcon
A text field with a leading icon and optional end text, such as a unit or a domain. The icon is a hint, never the label.
- InputWithIcon
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, InputWithIcon
.skribly.pl
Use letters, digits and dashes.
Dark theme, InputWithIcon
.skribly.pl
Use letters, digits and dashes.
High contrast theme, InputWithIcon
.skribly.pl
Use letters, digits and dashes.
UsageLink to the section Usage
import { InputWithIcon } from '@skribly/ui/forms'<InputWithIcon label="Website" icon={<Globe />} placeholder="example.com" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The icon is hidden from screen readers and the end text is plain text after the input, so the label must say everything.
- Long values scroll inside the box.
This demo runs through axe in all three themes on every test run. See what the tests check.