Input
This component is basically just a wrapper for
<input />
. You'll probably want to use it along with a <label>
. You also might prefer to use RFUI's FormField
component instead.import { Input } from "rfui-package";
Basic
<Input />
Controlled
<Input value={value} onInput={onInput} />
Size
Set
size
to either "sm"
, "md"
or "lg"
. Defaults to "md"
.<Stack className="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 className="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 defaultValue="example" />
Invalid
Set
invalid
to either true
or false
. Defaults to false
.<Input invalid defaultValue="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 className="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" defaultValue="foobar" />
<Input type="date" />
<Input type="datetime-local" />
<Input type="time" />
<Input type="file" />
<Input type="range" />
<Input type="color" />
</Stack>
Props
Prop | Required | Default | Type and notes |
---|---|---|---|
size | - | "md" |
|
rounded | - | - |
Defaults to the value of the CSS variable --default-roundedness . See "Default roundedness". |
invalid | - | false |
|
...rest | - | - |
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:
|