Input

Displays a form input field or a component that looks like an input field.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

npx ui-thing@latest add input

Picture

Restrict the number of characters that can be entered into the input field.

No more than 5 characters

Restrict the type of characters that can be entered into the input field.

You don't need to use / at the beginning and end of the pattern as the RegExp is being created internally with the new RegExp() constructor.

No spaces can be entered

Hover Card

For sighted users to preview content available behind a link.

Keyboard Key

The <kbd> HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.