Input renders a styled <input> with any type via the prop of the same name, plus daisyUI form styling. Size, colour, and validation state variants keep it consistent with other form components.
Basic Input
<c-lb.input type="text" placeholder="Type here" />
Color Variants
<div class="flex flex-col gap-2">
<c-lb.input variant="neutral" type="text" placeholder="Neutral" />
<c-lb.input variant="primary" type="text" placeholder="Primary" />
<c-lb.input variant="secondary" type="text" placeholder="Secondary" />
<c-lb.input variant="accent" type="text" placeholder="Accent" />
<c-lb.input variant="info" type="text" placeholder="Info" />
<c-lb.input variant="success" type="text" placeholder="Success" />
<c-lb.input variant="warning" type="text" placeholder="Warning" />
<c-lb.input variant="error" type="text" placeholder="Error" />
</div>
Sizes
<div class="flex flex-col gap-2">
<c-lb.input size="xs" type="text" placeholder="Extra Small" />
<c-lb.input size="sm" type="text" placeholder="Small" />
<c-lb.input size="md" type="text" placeholder="Medium" />
<c-lb.input size="lg" type="text" placeholder="Large" />
<c-lb.input size="xl" type="text" placeholder="Extra Large" />
</div>
With Fieldset
<c-lb.fieldset legend="What is your name?">
<c-lb.input type="text" placeholder="Type here" />
<c-lb.label>Optional</c-lb.label>
</c-lb.fieldset>
API Reference
c-lb.input
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| variant |
neutral
primary
secondary
accent
info
success
warning
error
|
- | No | Input color variant |
| size |
xs
sm
md
lg
xl
|
md
|
No | Input size |
| ghost | boolean |
False
|
No | Ghost/minimal styling variant |
| validate | boolean |
False
|
No | Enable validation styling |