Label
A set of label components for associating text with form inputs. Each component maps to a single DaisyUI pattern — pick the one that fits your use case.
Installation
npx jsx-daisyui add labelInput with Prefix
label-input-prefix
Input with Suffix
label-input-suffix
Input with Prefix and Suffix
label-input-both
Select Field
label-select
Floating Label
label-floating
Floating Label Sizes
label-floating-sizes
Plain Label
label-plain
Props
InputField
Wraps an <input> in a DaisyUI input container. Place Label.Prefix or Label.Suffix as children to render styled spans on either side of the input.
Prefix
A <span> rendered before the input inside an InputField.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Content shown before the input (e.g. "https://", "$"). |
Suffix
A <span> rendered after the input inside an InputField.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Content shown after the input (e.g. ".com", "USD"). |
SelectField
Wraps a <select> in a DaisyUI select container with an optional label span before it.
| Prop | Type | Default | Description |
|---|---|---|---|
label | React.ReactNode | - | Text rendered before the select (e.g. "Type", "Currency"). |
FloatingLabel
Wraps an <input> with a floating label that rises above the field on focus or when filled. Size the input via the input-xs/sm/md/lg/xl class on the child.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | The text that floats above the input on focus. |