Skip to content

feat(form elements): improve input, textarea, select #4371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pdanpdan wants to merge 3 commits into
base: master
Choose a base branch
from
+251 −162
Open

feat(form elements): improve input, textarea, select #4371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d8ac7bd
feat(form elements): improve input, textarea, select
pdanpdan Jan 6, 2026
bb675a0
chore: prefix `--size-` variables with `in-` and `sl-` to avoid prefi…
pdanpdan Jan 7, 2026
d9baef4
feat(label): implement responsive size for `floating-label`
pdanpdan Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 89 additions & 79 deletions packages/daisyui/src/components/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,76 @@
.input {
@layer daisyui.l1.l2.l3 {
cursor: text;
border: var(--border) solid #0000;
@apply bg-base-100 relative inline-flex shrink appearance-none items-center gap-2 px-3 align-middle whitespace-nowrap;

--size: calc(var(--size-field, 0.25rem) * var(--in-size-mul));
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);

cursor: text;
width: clamp(3rem, 20rem, 100%);
height: var(--size);
font-size: max(var(--font-size, 0.875rem), 0.875rem);
font-size: max(var(--font-size, 0rem), var(--font-size-min));
touch-action: manipulation;
border-start-start-radius: var(--join-ss, var(--radius-field));
border-start-end-radius: var(--join-se, var(--radius-field));
border-end-start-radius: var(--join-es, var(--radius-field));
border-end-end-radius: var(--join-ee, var(--radius-field));
border-color: var(--input-color);
border: var(--border) solid var(--input-color, #0000);
box-shadow:
0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset,
0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
--size: calc(var(--size-field, 0.25rem) * 10);
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
&:where(input) {
@apply inline-flex;
}
:where(input) {
@apply inline-flex h-full w-full appearance-none bg-transparent;

input {
@apply h-full w-full appearance-none bg-transparent;
border: none;

&::placeholder {
/* color and opacity to work with safari */
@apply text-base-content opacity-50;
}

&:focus,
&:focus-within {
@apply outline-hidden;
}
}

:where(input[type="url"]),
:where(input[type="email"]) {
direction: ltr;
&::-webkit-calendar-picker-indicator {
inset-inline-end: -0.15em;
}

&::-webkit-inner-spin-button {
margin-inline-end: -0.15em;
}
}

:where(input[type="date"]) {
@apply inline-flex;
input&,
input {
@apply relative inline-flex;

&[type="url"],
&[type="email"] {
direction: ltr;
}

&::-webkit-date-and-time-value {
text-align: inherit;
}

&::-webkit-inner-spin-button {
@apply -me-3;
margin-block: calc(var(--spacing) * var(--spin-my));
}

&::-webkit-calendar-picker-indicator {
position: absolute;
inset-inline-end: 0.75em;
width: 1em;
height: 1em;
cursor: pointer;
}

&::-webkit-color-swatch-wrapper {
@apply py-1;
}
}

&:focus,
Expand All @@ -61,43 +95,18 @@
&:has(> input[disabled]),
&:is(:disabled, [disabled]),
fieldset:disabled & {
@apply border-base-200 bg-base-200 placeholder-base-content text-base-content/40 placeholder-base-content/20 cursor-not-allowed;
@apply border-base-200 bg-base-200 text-base-content/40 cursor-not-allowed;
box-shadow: none;
}

&:has(> input[disabled]) > input[disabled] {
@apply cursor-not-allowed;
}

&::-webkit-date-and-time-value {
text-align: inherit;
}

&[type="number"] {
&::-webkit-inner-spin-button {
@apply -my-3 -me-3;
&::placeholder,
::placeholder {
/* color and opacity to work with safari */
@apply text-base-content opacity-20;
}
}

&::-webkit-calendar-picker-indicator {
position: absolute;
inset-inline-end: 0.75em;
}

&:has(> input[type="date"]) {
:where(input[type="date"]) {
@apply inline-flex;
-webkit-appearance: none;
appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
inset-inline-end: 0.75em;
width: 1em;
height: 1em;
cursor: pointer;
}
&:has(> input[disabled]) > input[disabled] {
@apply cursor-not-allowed;
}
}
}
Expand Down Expand Up @@ -199,65 +208,66 @@

.input-xs {
@layer daisyui.l1.l2 {
--size: calc(var(--size-field, 0.25rem) * 6);
font-size: max(var(--font-size, 0.6875rem), 0.6875rem);
--in-size-mul: 6;
--font-size-min: 0.6875rem;
--spin-my: -1;

&[type="number"] {
&::-webkit-inner-spin-button {
@apply -my-1 -me-3;
}
.floating-label:has(&) {
--top-mul: 3;
--font-size: 0.6875rem;
}
}
}

.input-sm {
@layer daisyui.l1.l2 {
--size: calc(var(--size-field, 0.25rem) * 8);
font-size: max(var(--font-size, 0.75rem), 0.75rem);
--in-size-mul: 8;
--font-size-min: 0.75rem;
--spin-my: -2;

&[type="number"] {
&::-webkit-inner-spin-button {
@apply -my-2 -me-3;
}
.floating-label:has(&) {
--top-mul: 4;
--font-size: 0.75rem;
}
}
}

.input,
.input-md {
@layer daisyui.l1.l2 {
--size: calc(var(--size-field, 0.25rem) * 10);
font-size: max(var(--font-size, 0.875rem), 0.875rem);
--in-size-mul: 10;
--font-size-min: 0.875rem;
--spin-my: -3;

&[type="number"] {
&::-webkit-inner-spin-button {
@apply -my-3 -me-3;
}
.floating-label:has(&) {
--top-mul: 5;
--font-size: 0.875rem;
}
}
}

.input-lg {
@layer daisyui.l1.l2 {
--size: calc(var(--size-field, 0.25rem) * 12);
font-size: max(var(--font-size, 1.125rem), 1.125rem);
--in-size-mul: 12;
--font-size-min: 1.125rem;
--spin-my: -3;

&[type="number"] {
&::-webkit-inner-spin-button {
@apply -my-3 -me-3;
}
.floating-label:has(&) {
--top-mul: 6;
--font-size: 1.125rem;
}
}
}

.input-xl {
@layer daisyui.l1.l2 {
--size: calc(var(--size-field, 0.25rem) * 14);
font-size: max(var(--font-size, 1.375rem), 1.375rem);
--in-size-mul: 14;
--font-size-min: 1.375rem;
--spin-my: -4;

&[type="number"] {
&::-webkit-inner-spin-button {
@apply -my-4 -me-3;
}
.floating-label:has(&) {
--top-mul: 7;
--font-size: 1.375rem;
}
}
}
50 changes: 9 additions & 41 deletions packages/daisyui/src/components/label.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,30 +20,18 @@
}
.floating-label {
@layer daisyui.l1.l2.l3 {
@apply relative block;
input {
@apply block;
&::placeholder {
transition:
top 0.1s ease-out,
translate 0.1s ease-out,
scale 0.1s ease-out,
opacity 0.1s ease-out;
}
}
textarea {
&::placeholder {
transition:
top 0.1s ease-out,
translate 0.1s ease-out,
scale 0.1s ease-out,
opacity 0.1s ease-out;
}
@apply relative flex;
::placeholder {
transition:
top 0.1s ease-out,
translate 0.1s ease-out,
scale 0.1s ease-out,
opacity 0.1s ease-out;
}
> span {
@apply bg-base-100 absolute start-3 z-1 px-1 opacity-0;
font-size: 0.875rem;
top: calc(var(--size-field, 0.25rem) * 10 / 2);
font-size: var(--font-size, 0.875rem);
top: calc(var(--size-field, 0.25rem) * var(--top-mul, 5));
line-height: 1;
border-radius: 2px;
pointer-events: none;
Expand Down Expand Up @@ -77,25 +65,5 @@
@apply opacity-0;
}
}
&:has(.input-xs, .select-xs, .textarea-xs) span {
font-size: 0.6875rem;
top: calc(var(--size-field, 0.25rem) * 6 / 2);
}
&:has(.input-sm, .select-sm, .textarea-sm) span {
font-size: 0.75rem;
top: calc(var(--size-field, 0.25rem) * 8 / 2);
}
&:has(.input-md, .select-md, .textarea-md) span {
font-size: 0.875rem;
top: calc(var(--size-field, 0.25rem) * 10 / 2);
}
&:has(.input-lg, .select-lg, .textarea-lg) span {
font-size: 1.125rem;
top: calc(var(--size-field, 0.25rem) * 12 / 2);
}
&:has(.input-xl, .select-xl, .textarea-xl) span {
font-size: 1.375rem;
top: calc(var(--size-field, 0.25rem) * 14 / 2);
}
}
}
Loading