Basic
<Input />
Controlled
<Input value={value} onInput={onInput} />
Size
Set
size
to either "sm"
, "md"
or "lg"
. Defaults to "md"
.<Stack class="w-fit gap-5">
<Input size="sm" />
<Input size="md" />
<Input size="lg" />
</Stack>
Rounded
Set
rounded
to either "square"
, "sm"
, "lg"
or "full"
. Defaults to the value of the CSS variable --default-roundedness
. See "Default roundedness".<Stack class="w-fit gap-5">
<Input rounded="square" />
<Input rounded="sm" />
<Input rounded="lg" />
<Input rounded="full" />
</Stack>
Disabled
Set
disabled
to either true
or false
. Defaults to false
.<Input disabled />
Readonly
Set
readonly
to either true
or false
. Defaults to false
.<Input readonly value="example" />
Invalid
Set
invalid
to either true
or false
. Defaults to false
.<Input invalid value="example" />
Type
RFUI's
Input
component wraps the native HTML input
and passes type
to input
, and so you could find the possible values documented here on MDN. If you are thinking of using number
, consider taking this approach instead.<Stack class="gap-5">
<Input type="text" placeholder="text" />
<Input type="email" placeholder="email" />
<Input type="text" inputmode="numeric" pattern="[0-9]*" />
<Input type="number" />
<Input type="password" value="foobar" />
<Input type="date" />
<Input type="datetime-local" />
<Input type="time" />
<Input type="file" />
<Input type="range" />
<Input type="color" />
</Stack>
Props
size
Required
false
Type
"sm" | "md" | "lg"
Default
"md"
rounded
Required
false
Type
"square" | "sm" | "lg" | "full"
Default
none
Notes
Defaults to the value of the CSS variable
--default-roundedness
. See "Default roundedness".invalid
Required
false
Type
boolean
Default
false
...rest
Required
false
Type
Omit<ComponentProps<"input">, "size">
Default
none
Notes
See the docs for rest parameters. For
Input
, you could pass anything you normally would pass to <input />
because the return value looks something like this:<input
class={className}
{...restWithoutClass}
/>