Input

A slightly better than native™ input.

placeholder

string

Placeholder of the input

theme

Theme

The theme of the Checkbox.

size

Size

The size of the Checkbox.

variant

Variant

The variant of the Button.

disabled

boolean

Whether the Checkbox is disabled.

leadingIcon

ReactNode

Icon shown before the content.

trailingIcon

ReactNode

Icon shown after the content.


Examples

With Icons

You can use the leadingIcon and trailingIcon props to add icons before/after the Input content.

These props accept any ReactNode, so you can use any icon library you want. If the icons are not being sized correctly, make sure there is no implicit width/height props on the icon, and try adding w-full h-full.

With InputGroup

You can use the Input component inside an InputGroup to create a segmented Input. The InputGroup can be used with Input, Select and Input.

Learn more about InputGroup here ->.