Input
A component for collecting data input.
Enter your full name
Usage
import { Input, InputWrapper } from "#/ui/components/Input"<InputWrapper label="Name">
<Input placeholder="Dan Spratling" />
</InputWrapper>How it works
The Input component provides some base styling to the regular input element, but you can pass any other props to it that you would normally pass to an input element too.
The InputWrapper goes around your Input to provide additional associated elements easily like labels & hints, but it’s totally optional if you want to use an Input separate from your labels and roll-your-own.
<InputWrapper label="Name">
<Input placeholder="Dan Spratling" />
</InputWrapper><div className="w-full flex items-center">
<label htmlFor="example-input" className="w-1/3">
Custom Label
</label>
<Input id="example-input" placeholder="Dan Spratling" />
</div>Hint
You can pass a hint to the InputWrapper to provide additional context to the user.
What do you call yourself?
<InputWrapper label="Name" hint="required">
<Input placeholder="Dan Spratling" />
</InputWrapper>Error
Passing an error to the InputWrapper and Input will display error styles. If a hint exists, it will be replaced with the error.
Your name is required
<InputWrapper label="Name" hint="required" error="Your name is required">
<Input placeholder="Dan Spratling" error={true} />
</InputWrapper>Leading Elements
You can pass a InputLeading element to the InputWrapper to provide additional context to the user. This can accept any element as a child, which you can style yourself, but there are a few presets to help you get started.
Icon
<InputWrapper label="Name">
<InputLeading type="icon">
<Mail01Icon />
</InputLeading>
<Input placeholder="hello@skyward.digital" className="pl-10" />
</InputWrapper>Text
<InputWrapper label="URL">
<InputLeading type="text">https://</InputLeading>
<Input placeholder="skyward.digital" className="rounded-l-none" />
</InputWrapper>Trailing Elements
Similar to the leading elements, this can accept children but has a few presets ready to go.
Icon
<InputWrapper label="Name">
<Input placeholder="hello@skyward.digital" />
<InputTrailing type="icon">
<Mail01Icon />
</InputTrailing>
</InputWrapper>Text
<InputWrapper label="URL">
<Input placeholder="skyward.digital" className="rounded-r-none" />
<InputTrailing type="text">/blog</InputTrailing>
</InputWrapper>Custom
You can customise the input however you’d like by passing predefined or custom leading/trailing components within the slots. You can also style these components to match the input if necessary.
required
<InputWrapper label="URL" hint="required" className="w-full max-w-xl">
<InputLeading type="text">https://</InputLeading>
<Input placeholder="skyward.digital" className="rounded-none" />
<InputTrailing>
<Button variant="outline" className="rounded-l-none -ml-px border-gray-300 flex-none">
Copy
<Copy06Icon className="size-4" />
</Button>
</InputTrailing>
<Button variant="primary" size="md" className="flex-none ml-4">
<span>Save</span>
</Button>
</InputWrapper>