Add this component

npx zentauri-ui add inputs

Accessibility notes

Keyboard accessible controls with labels, focus-visible rings, and state attributes. Keep visible labels or aria-labels when copying snippets.

Dependency notes

Static imports do not pull framer-motion. Use the animated entry only when you want motion and have framer-motion installed.

Forms

Inputs for accessible data entry

Text inputs with supporting labels, hints, and error text for React forms. Use them in Next.js server actions or client forms while keeping focus management predictable.

EmailPasswordError state

Appearance

Default, error, and success appearances

Use `appearance` for validation styling. Error sets `aria-invalid` unless you override it.

Default

Warning

Info

Error

Success

Motion presets

Optional focus and hover motion

Same preset names as the button: `lift`, `press`, `glow`, `tilt`, `bounce`, or `none`.

Lift

Press

Glow

Tilt

Bounce

None

Multiline

`as="textarea"`

Same CVA recipe, motion presets, and data-slot="input" as the single-line control; height uses min-height and vertical resize so longer copy stays comfortable.

Description

File upload

`as="file"`

Wraps <input type="file"> with the same CVA recipe. The native file-selector button inherits the active appearance colour, and all three sizes are supported.

Sizes

sm, md, lg

Heights align with the button scale. Pass `disabled`, `readOnly`, `autoComplete`, and any other native attribute alongside variants.

Small

Medium

Large

States

Disabled and read-only

Disabled

Read only

Controlled

Value driven by React state

Current value: (empty)

The same state is wired to the controlled example in "Input variants examples" below.

Input variants playground

Pick an appearance, size, animation, and ring to preview the input live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Appearance

Size

Animation

Ring

Pattern: TEXTAREA + GLOW

Type: PASSWORD

State: DISABLED

State: READ ONLY

Pattern: CONTROLLED

Slot: ERROR MESSAGE

This is an error message

Ring: FALSE

As: FILE

As: CHECKBOX

Accept Terms

As: RADIO

Pattern: RADIO GROUP

StarterPro

Type: DATE

Inputs API

Generated from the package prop types and variant definitions.

Input

InputProps

Variants

Prop	Type	Default
appearance	`amberaquabluecrimsoncyandefaultelectricerrorforestgreenindigoinfo`+19	default
as	`checkboxdatefileinputradiotextarea`	input
ring	`falsetrue`	none
size	`lgmdsm`	md

Behavior

Prop	Type	Default
errorMessage	`string \| undefined`	none
hint	`ReactNode`	none
label	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLInputElement> \| MouseEventHandler<HTMLTextAreaElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

InputShared

InputSharedProps

Behavior

Prop	Type	Default
appearance	`'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'pink' \| 'orange' \| 'indigo' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'violet' \| 'amber' \| null \| undefined`	none
errorMessage	`string \| undefined`	none
hint	`ReactNode`	none
label	`ReactNode`	none
ring	`boolean \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

InputAnimated

InputAnimatedProps

animated

Behavior

Prop	Type	Default
animation	`InputAnimation \| undefined`	none
appearance	`'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'pink' \| 'orange' \| 'indigo' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'violet' \| 'amber' \| null \| undefined`	none
as	`'input' \| 'textarea' \| 'checkbox' \| 'radio' \| 'file' \| undefined`	none
errorMessage	`string \| undefined`	none
ring	`boolean \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode \| MotionValueNumber \| MotionValueString`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLInputElement> \| MouseEventHandler<HTMLTextAreaElement> \| undefined`	none
style The React DOM `style` prop, enhanced with support for `MotionValue`s and separate `transform` values. ```jsx export const MyComponent = () => { const x = useMotionValue(0) return <motion.div style={{ x, opacity: 1, scale: 0.5 }} /> } ```	`MotionStyle \| undefined`	none
title	`string \| undefined`	none

InputSharedAnimated

InputSharedAnimatedProps

animated

Behavior

Prop	Type	Default
animation	`InputAnimation \| undefined`	none
appearance	`'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'pink' \| 'orange' \| 'indigo' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'violet' \| 'amber' \| null \| undefined`	none
errorMessage	`string \| undefined`	none
ring	`boolean \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

CSS variable overrides

Inputs CSS variables

Override these inputs variables on :root, a theme selector, or a component wrapper.

1449 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-input-bg: #0000000d;
  --zui-input-fg: oklch(20.8% 0.042 265.755);
  --zui-input-shadow: 0 1px 2px rgba(15,23,42,0.08);
  --zui-input-ring-offset: oklch(98.4% 0.003 247.858);
  --zui-input-placeholder-fg: oklch(55.4% 0.046 257.417);
  --zui-input-bg-read-only: #00000008;
  --zui-input-file-border: #0000001a;
  --zui-input-file-bg: #0000001a;
  --zui-input-file-fg: oklch(37.2% 0.044 257.287);
  --zui-input-file-bg-hover: #00000026;
  --zui-input-file-fg-hover: #ffffff;
  --zui-input-checkbox-border: #0000004d;
  --zui-input-checkbox-bg: transparent;
  --zui-input-radio-border: #0000004d;
  --zui-input-radio-bg: transparent;
  --zui-input-radio-bg-read-only: transparent;
  --zui-input-radio-ring: #00000033;
  --zui-input-radio-ring-offset: oklch(98.4% 0.003 247.858);
  --zui-input-default-border: #0000001a;
  --zui-input-default-border-focus: #00000033;
  --zui-input-warning-border: oklch(79.5% 0.184 86.047 / 0.8);
  --zui-input-warning-fg: oklch(28.6% 0.066 53.813);
  --zui-input-warning-placeholder-fg: oklch(47.6% 0.114 61.907);
  --zui-input-warning-border-focus: oklch(68.1% 0.162 75.834);
  --zui-input-warning-ring-focus: oklch(85.2% 0.199 91.936 / 0.8);
  --zui-input-error-border: oklch(64.5% 0.246 16.439 / 0.8);
  --zui-input-error-fg: oklch(27.1% 0.105 12.094);
  --zui-input-error-placeholder-fg: oklch(45.5% 0.188 13.697);
  --zui-input-error-border-focus: oklch(58.6% 0.253 17.585);
  --zui-input-error-ring-focus: oklch(71.2% 0.194 13.428 / 0.8);
  --zui-input-success-border: oklch(69.6% 0.17 162.48 / 0.7);
  --zui-input-success-fg: oklch(26.2% 0.051 172.552);
  --zui-input-success-placeholder-fg: oklch(43.2% 0.095 166.913);
  --zui-input-success-border-focus: oklch(59.6% 0.145 163.225);
  --zui-input-success-ring-focus: oklch(76.5% 0.177 163.223 / 0.8);
  --zui-input-info-border: oklch(62.3% 0.214 259.815 / 0.8);
  --zui-input-info-fg: oklch(28.2% 0.091 267.935);
  --zui-input-info-placeholder-fg: oklch(42.4% 0.199 265.638);
  --zui-input-info-border-focus: oklch(54.6% 0.245 262.881);
  --zui-input-info-ring-focus: oklch(70.7% 0.165 254.624 / 0.8);
  --zui-input-violet-border: oklch(60.6% 0.25 292.717 / 0.8);
  --zui-input-violet-fg: oklch(28.3% 0.141 291.089);
  --zui-input-violet-placeholder-fg: oklch(43.2% 0.232 292.759);
  --zui-input-violet-border-focus: oklch(54.1% 0.281 293.009);
  --zui-input-violet-ring-focus: oklch(70.2% 0.183 293.541 / 0.8);
  --zui-input-amber-border: oklch(76.9% 0.188 70.08 / 0.8);
  --zui-input-amber-fg: oklch(27.9% 0.077 45.635);
  --zui-input-amber-placeholder-fg: oklch(47.3% 0.137 46.201);
  --zui-input-amber-border-focus: oklch(66.6% 0.179 58.318);
  --zui-input-amber-ring-focus: oklch(82.8% 0.189 84.429 / 0.8);
  --zui-input-pink-border: oklch(65.6% 0.241 354.308 / 0.8);
  --zui-input-pink-fg: oklch(28.4% 0.109 3.907);
  --zui-input-pink-placeholder-fg: oklch(45.9% 0.187 3.815);
  --zui-input-pink-border-focus: oklch(59.2% 0.249 0.584);
  --zui-input-pink-ring-focus: oklch(71.8% 0.202 349.761 / 0.8);
  --zui-input-indigo-border: oklch(58.5% 0.233 277.117 / 0.8);
  --zui-input-indigo-fg: oklch(25.7% 0.09 281.288);
  --zui-input-indigo-placeholder-fg: oklch(39.8% 0.195 277.366);
  --zui-input-indigo-border-focus: oklch(51.1% 0.262 276.966);
  --zui-input-indigo-ring-focus: oklch(67.3% 0.182 276.935 / 0.8);
  --zui-input-orange-border: oklch(70.5% 0.213 47.604 / 0.8);
  --zui-input-orange-fg: oklch(26.6% 0.079 36.259);
  --zui-input-orange-placeholder-fg: oklch(47% 0.157 37.304);
  --zui-input-orange-border-focus: oklch(64.6% 0.222 41.116);
  --zui-input-orange-ring-focus: oklch(75% 0.183 55.934 / 0.8);
  --zui-input-blue-border: #2563eb;
  --zui-input-blue-fg: #0f172a;
  --zui-input-blue-placeholder: #2563ebaa;
  --zui-input-blue-border-focus: #2563eb;
  --zui-input-blue-ring-focus: #2563eb33;
  --zui-input-cyan-border: #0891b2;
  --zui-input-cyan-fg: #0f172a;
  --zui-input-cyan-placeholder: #0891b2aa;
  --zui-input-cyan-border-focus: #0891b2;
  --zui-input-cyan-ring-focus: #0891b233;
  --zui-input-green-border: #16a34a;
  --zui-input-green-fg: #0f172a;
  --zui-input-green-placeholder: #16a34aaa;
  --zui-input-green-border-focus: #16a34a;
  --zui-input-green-ring-focus: #16a34a33;
  --zui-input-lime-border: #65a30d;
  --zui-input-lime-fg: #0f172a;
  --zui-input-lime-placeholder: #65a30daa;
  --zui-input-lime-border-focus: #65a30d;
  --zui-input-lime-ring-focus: #65a30d33;
  --zui-input-mint-border: #10b981;
  --zui-input-mint-fg: #0f172a;
  --zui-input-mint-placeholder: #10b981aa;
  --zui-input-mint-border-focus: #10b981;
  --zui-input-mint-ring-focus: #10b98133;
  --zui-input-ocean-border: #0284c7;
  --zui-input-ocean-fg: #0f172a;
  --zui-input-ocean-placeholder: #0284c7aa;
  --zui-input-ocean-border-focus: #0284c7;
  --zui-input-ocean-ring-focus: #0284c733;
  --zui-input-sapphire-border: #1d4ed8;
  --zui-input-sapphire-fg: #0f172a;
  --zui-input-sapphire-placeholder: #1d4ed8aa;
  --zui-input-sapphire-border-focus: #1d4ed8;
  --zui-input-sapphire-ring-focus: #1d4ed833;
  --zui-input-lavender-border: #8b5cf6;
  --zui-input-lavender-fg: #0f172a;
  --zui-input-lavender-placeholder: #8b5cf6aa;
  --zui-input-lavender-border-focus: #8b5cf6;
  --zui-input-lavender-ring-focus: #8b5cf633;
  --zui-input-ruby-border: #be123c;
  --zui-input-ruby-fg: #0f172a;
  --zui-input-ruby-placeholder: #be123caa;
  --zui-input-ruby-border-focus: #be123c;
  --zui-input-ruby-ring-focus: #be123c33;
  --zui-input-red-border: #dc2626;
  --zui-input-red-fg: #0f172a;
  --zui-input-red-placeholder: #dc2626aa;
  --zui-input-red-border-focus: #dc2626;
  --zui-input-red-ring-focus: #dc262633;
  --zui-input-slate-border: #475569;
  --zui-input-slate-fg: #0f172a;
  --zui-input-slate-placeholder: #475569aa;
  --zui-input-slate-border-focus: #475569;
  --zui-input-slate-ring-focus: #47556933;
  --zui-input-zinc-border: #52525b;
  --zui-input-zinc-fg: #0f172a;
  --zui-input-zinc-placeholder: #52525baa;
  --zui-input-zinc-border-focus: #52525b;
  --zui-input-zinc-ring-focus: #52525b33;
  --zui-input-stone-border: #57534e;
  --zui-input-stone-fg: #0f172a;
  --zui-input-stone-placeholder: #57534eaa;
  --zui-input-stone-border-focus: #57534e;
  --zui-input-stone-ring-focus: #57534e33;
  --zui-input-royal-border: #4338ca;
  --zui-input-royal-fg: #0f172a;
  --zui-input-royal-placeholder: #4338caaa;
  --zui-input-royal-border-focus: #4338ca;
  --zui-input-royal-ring-focus: #4338ca33;
  --zui-input-electric-border: #0ea5e9;
  --zui-input-electric-fg: #0f172a;
  --zui-input-electric-placeholder: #0ea5e9aa;
  --zui-input-electric-border-focus: #0ea5e9;
  --zui-input-electric-ring-focus: #0ea5e933;
  --zui-input-forest-border: #166534;
  --zui-input-forest-fg: #0f172a;
  --zui-input-forest-placeholder: #166534aa;
  --zui-input-forest-border-focus: #166534;
  --zui-input-forest-ring-focus: #16653433;
  --zui-input-sunset-border: #ea580c;
  --zui-input-sunset-fg: #0f172a;
  --zui-input-sunset-placeholder: #ea580caa;
  --zui-input-sunset-border-focus: #ea580c;
  --zui-input-sunset-ring-focus: #ea580c33;
  --zui-input-magenta-border: #c026d3;
  --zui-input-magenta-fg: #0f172a;
  --zui-input-magenta-placeholder: #c026d3aa;
  --zui-input-magenta-border-focus: #c026d3;
  --zui-input-magenta-ring-focus: #c026d333;
  --zui-input-crimson-border: #b91c1c;
  --zui-input-crimson-fg: #0f172a;
  --zui-input-crimson-placeholder: #b91c1caa;
  --zui-input-crimson-border-focus: #b91c1c;
  --zui-input-crimson-ring-focus: #b91c1c33;
  --zui-input-aqua-border: #0f766e;
  --zui-input-aqua-fg: #0f172a;
  --zui-input-aqua-placeholder: #0f766eaa;
  --zui-input-aqua-border-focus: #0f766e;
  --zui-input-aqua-ring-focus: #0f766e33;
  --zui-input-plum-border: #7e22ce;
  --zui-input-plum-fg: #0f172a;
  --zui-input-plum-placeholder: #7e22ceaa;
  --zui-input-plum-border-focus: #7e22ce;
  --zui-input-plum-ring-focus: #7e22ce33;
  --zui-input-file-default-fg: #334155;
  --zui-input-file-warning-bg: #eab30833;
  --zui-input-file-warning-fg: #854d0e;
  --zui-input-file-warning-border: #eab30866;
  --zui-input-file-warning-bg-hover: #eab3084d;
  --zui-input-file-error-bg: #f43f5e33;
  --zui-input-file-error-fg: #9f1239;
  --zui-input-file-error-border: #f43f5e66;
  --zui-input-file-error-bg-hover: #f43f5e4d;
  --zui-input-file-success-bg: #10b98133;
  --zui-input-file-success-fg: #065f46;
  --zui-input-file-success-border: #10b98166;
  --zui-input-file-success-bg-hover: #10b9814d;
  --zui-input-file-info-bg: #3b82f633;
  --zui-input-file-info-fg: #1e40af;
  --zui-input-file-info-border: #3b82f666;
  --zui-input-file-info-bg-hover: #3b82f64d;
  --zui-input-file-violet-bg: #8b5cf633;
  --zui-input-file-violet-fg: #5b21b6;
  --zui-input-file-violet-border: #8b5cf666;
  --zui-input-file-violet-bg-hover: #8b5cf64d;
  --zui-input-file-amber-bg: #f59e0b33;
  --zui-input-file-amber-fg: #92400e;
  --zui-input-file-amber-border: #f59e0b66;
  --zui-input-file-amber-bg-hover: #f59e0b4d;
  --zui-input-file-pink-bg: #ec489933;
  --zui-input-file-pink-fg: #9d174d;
  --zui-input-file-pink-border: #ec489966;
  --zui-input-file-pink-bg-hover: #ec48994d;
  --zui-input-file-indigo-bg: #6366f133;
  --zui-input-file-indigo-fg: #3730a3;
  --zui-input-file-indigo-border: #6366f166;
  --zui-input-file-indigo-bg-hover: #6366f14d;
  --zui-input-file-blue-file-border: #2563eb;
  --zui-input-file-blue-file-bg: #2563eb14;
  --zui-input-file-blue-file-fg: #2563eb;
  --zui-input-file-blue-file-bg-hover: #2563eb24;
  --zui-input-file-cyan-file-border: #0891b2;
  --zui-input-file-cyan-file-bg: #0891b214;
  --zui-input-file-cyan-file-fg: #0891b2;
  --zui-input-file-cyan-file-bg-hover: #0891b224;
  --zui-input-file-green-file-border: #16a34a;
  --zui-input-file-green-file-bg: #16a34a14;
  --zui-input-file-green-file-fg: #16a34a;
  --zui-input-file-green-file-bg-hover: #16a34a24;
  --zui-input-file-lime-file-border: #65a30d;
  --zui-input-file-lime-file-bg: #65a30d14;
  --zui-input-file-lime-file-fg: #65a30d;
  --zui-input-file-lime-file-bg-hover: #65a30d24;
  --zui-input-file-mint-file-border: #10b981;
  --zui-input-file-mint-file-bg: #10b98114;
  --zui-input-file-mint-file-fg: #10b981;
  --zui-input-file-mint-file-bg-hover: #10b98124;
  --zui-input-file-ocean-file-border: #0284c7;
  --zui-input-file-ocean-file-bg: #0284c714;
  --zui-input-file-ocean-file-fg: #0284c7;
  --zui-input-file-ocean-file-bg-hover: #0284c724;
  --zui-input-file-sapphire-file-border: #1d4ed8;
  --zui-input-file-sapphire-file-bg: #1d4ed814;
  --zui-input-file-sapphire-file-fg: #1d4ed8;
  --zui-input-file-sapphire-file-bg-hover: #1d4ed824;
  --zui-input-file-lavender-file-border: #8b5cf6;
  --zui-input-file-lavender-file-bg: #8b5cf614;
  --zui-input-file-lavender-file-fg: #8b5cf6;
  --zui-input-file-lavender-file-bg-hover: #8b5cf624;
  --zui-input-file-ruby-file-border: #be123c;
  --zui-input-file-ruby-file-bg: #be123c14;
  --zui-input-file-ruby-file-fg: #be123c;
  --zui-input-file-ruby-file-bg-hover: #be123c24;
  --zui-input-file-red-file-border: #dc2626;
  --zui-input-file-red-file-bg: #dc262614;
  --zui-input-file-red-file-fg: #dc2626;
  --zui-input-file-red-file-bg-hover: #dc262624;
  --zui-input-file-slate-file-border: #475569;
  --zui-input-file-slate-file-bg: #47556914;
  --zui-input-file-slate-file-fg: #475569;
  --zui-input-file-slate-file-bg-hover: #47556924;
  --zui-input-file-zinc-file-border: #52525b;
  --zui-input-file-zinc-file-bg: #52525b14;
  --zui-input-file-zinc-file-fg: #52525b;
  --zui-input-file-zinc-file-bg-hover: #52525b24;
  --zui-input-file-stone-file-border: #57534e;
  --zui-input-file-stone-file-bg: #57534e14;
  --zui-input-file-stone-file-fg: #57534e;
  --zui-input-file-stone-file-bg-hover: #57534e24;
  --zui-input-file-royal-file-border: #4338ca;
  --zui-input-file-royal-file-bg: #4338ca14;
  --zui-input-file-royal-file-fg: #4338ca;
  --zui-input-file-royal-file-bg-hover: #4338ca24;
  --zui-input-file-electric-file-border: #0ea5e9;
  --zui-input-file-electric-file-bg: #0ea5e914;
  --zui-input-file-electric-file-fg: #0ea5e9;
  --zui-input-file-electric-file-bg-hover: #0ea5e924;
  --zui-input-file-forest-file-border: #166534;
  --zui-input-file-forest-file-bg: #16653414;
  --zui-input-file-forest-file-fg: #166534;
  --zui-input-file-forest-file-bg-hover: #16653424;
  --zui-input-file-sunset-file-border: #ea580c;
  --zui-input-file-sunset-file-bg: #ea580c14;
  --zui-input-file-sunset-file-fg: #ea580c;
  --zui-input-file-sunset-file-bg-hover: #ea580c24;
  --zui-input-file-magenta-file-border: #c026d3;
  --zui-input-file-magenta-file-bg: #c026d314;
  --zui-input-file-magenta-file-fg: #c026d3;
  --zui-input-file-magenta-file-bg-hover: #c026d324;
  --zui-input-file-crimson-file-border: #b91c1c;
  --zui-input-file-crimson-file-bg: #b91c1c14;
  --zui-input-file-crimson-file-fg: #b91c1c;
  --zui-input-file-crimson-file-bg-hover: #b91c1c24;
  --zui-input-file-aqua-file-border: #0f766e;
  --zui-input-file-aqua-file-bg: #0f766e14;
  --zui-input-file-aqua-file-fg: #0f766e;
  --zui-input-file-aqua-file-bg-hover: #0f766e24;
  --zui-input-file-plum-file-border: #7e22ce;
  --zui-input-file-plum-file-bg: #7e22ce14;
  --zui-input-file-plum-file-fg: #7e22ce;
  --zui-input-file-plum-file-bg-hover: #7e22ce24;
  --zui-input-file-orange-file-border: #ea580c;
  --zui-input-file-orange-file-bg: #ea580c14;
  --zui-input-file-orange-file-fg: #ea580c;
  --zui-input-file-orange-file-bg-hover: #ea580c24;
  --zui-input-checkbox-default-border: #94a3b8b3;
  --zui-input-checkbox-default-border-checked: #334155;
  --zui-input-checkbox-default-fg-checked: #334155;
  --zui-input-checkbox-default-border-hover: #475569;
  --zui-input-checkbox-default-border-focus: #475569;
  --zui-input-checkbox-default-ring-focus: #64748bb3;
  --zui-input-checkbox-warning-border: #eab308b3;
  --zui-input-checkbox-warning-border-checked: #ca8a04;
  --zui-input-checkbox-warning-fg-checked: #a16207;
  --zui-input-checkbox-warning-border-hover: #ca8a04;
  --zui-input-checkbox-warning-border-focus: #ca8a04;
  --zui-input-checkbox-warning-ring-focus: #facc15cc;
  --zui-input-checkbox-error-border: #f43f5eb3;
  --zui-input-checkbox-error-border-checked: #e11d48;
  --zui-input-checkbox-error-fg-checked: #be123c;
  --zui-input-checkbox-error-border-hover: #e11d48;
  --zui-input-checkbox-error-border-focus: #e11d48;
  --zui-input-checkbox-error-ring-focus: #fb7185cc;
  --zui-input-checkbox-success-border: #10b981b3;
  --zui-input-checkbox-success-border-checked: #059669;
  --zui-input-checkbox-success-fg-checked: #047857;
  --zui-input-checkbox-success-border-hover: #059669;
  --zui-input-checkbox-success-border-focus: #059669;
  --zui-input-checkbox-success-ring-focus: #34d399cc;
  --zui-input-checkbox-info-border: #3b82f6b3;
  --zui-input-checkbox-info-border-checked: #2563eb;
  --zui-input-checkbox-info-fg-checked: #1d4ed8;
  --zui-input-checkbox-info-border-hover: #2563eb;
  --zui-input-checkbox-info-border-focus: #2563eb;
  --zui-input-checkbox-info-ring-focus: #60a5facc;
  --zui-input-checkbox-violet-border: #8b5cf6b3;
  --zui-input-checkbox-violet-border-checked: #7c3aed;
  --zui-input-checkbox-violet-fg-checked: #6d28d9;
  --zui-input-checkbox-violet-border-hover: #7c3aed;
  --zui-input-checkbox-violet-border-focus: #7c3aed;
  --zui-input-checkbox-violet-ring-focus: #a78bfacc;
  --zui-input-checkbox-amber-border: #f59e0bb3;
  --zui-input-checkbox-amber-border-checked: #fbbf24;
  --zui-input-checkbox-amber-fg-checked: #b45309;
  --zui-input-checkbox-amber-border-hover: #fbbf24;
  --zui-input-checkbox-amber-border-focus: #fbbf24;
  --zui-input-checkbox-amber-ring-focus: #fbbf24cc;
  --zui-input-checkbox-pink-border: #ec4899b3;
  --zui-input-checkbox-pink-border-checked: #db2777;
  --zui-input-checkbox-pink-fg-checked: #be185d;
  --zui-input-checkbox-pink-border-hover: #db2777;
  --zui-input-checkbox-pink-border-focus: #db2777;
  --zui-input-checkbox-pink-ring-focus: #f472b6cc;
  --zui-input-checkbox-indigo-border: #6366f1b3;
  --zui-input-checkbox-indigo-border-checked: #818cf8;
  --zui-input-checkbox-indigo-fg-checked: #4338ca;
  --zui-input-checkbox-indigo-border-hover: #818cf8;
  --zui-input-checkbox-indigo-border-focus: #818cf8;
  --zui-input-checkbox-indigo-ring-focus: #818cf8cc;
  --zui-input-checkbox-blue-border: #2563eb;
  --zui-input-checkbox-blue-border-checked: #2563eb;
  --zui-input-checkbox-blue-bg-checked: #2563eb;
  --zui-input-checkbox-blue-fg-checked: #ffffff;
  --zui-input-checkbox-blue-ring-focus: #2563eb33;
  --zui-input-checkbox-cyan-border: #0891b2;
  --zui-input-checkbox-cyan-border-checked: #0891b2;
  --zui-input-checkbox-cyan-bg-checked: #0891b2;
  --zui-input-checkbox-cyan-fg-checked: #083344;
  --zui-input-checkbox-cyan-ring-focus: #0891b233;
  --zui-input-checkbox-green-border: #16a34a;
  --zui-input-checkbox-green-border-checked: #16a34a;
  --zui-input-checkbox-green-bg-checked: #16a34a;
  --zui-input-checkbox-green-fg-checked: #ffffff;
  --zui-input-checkbox-green-ring-focus: #16a34a33;
  --zui-input-checkbox-lime-border: #65a30d;
  --zui-input-checkbox-lime-border-checked: #65a30d;
  --zui-input-checkbox-lime-bg-checked: #65a30d;
  --zui-input-checkbox-lime-fg-checked: #1a2e05;
  --zui-input-checkbox-lime-ring-focus: #65a30d33;
  --zui-input-checkbox-mint-border: #10b981;
  --zui-input-checkbox-mint-border-checked: #10b981;
  --zui-input-checkbox-mint-bg-checked: #10b981;
  --zui-input-checkbox-mint-fg-checked: #064e3b;
  --zui-input-checkbox-mint-ring-focus: #10b98133;
  --zui-input-checkbox-ocean-border: #0284c7;
  --zui-input-checkbox-ocean-border-checked: #0284c7;
  --zui-input-checkbox-ocean-bg-checked: #0284c7;
  --zui-input-checkbox-ocean-fg-checked: #082f49;
  --zui-input-checkbox-ocean-ring-focus: #0284c733;
  --zui-input-checkbox-sapphire-border: #1d4ed8;
  --zui-input-checkbox-sapphire-border-checked: #1d4ed8;
  --zui-input-checkbox-sapphire-bg-checked: #1d4ed8;
  --zui-input-checkbox-sapphire-fg-checked: #ffffff;
  --zui-input-checkbox-sapphire-ring-focus: #1d4ed833;
  --zui-input-checkbox-lavender-border: #8b5cf6;
  --zui-input-checkbox-lavender-border-checked: #8b5cf6;
  --zui-input-checkbox-lavender-bg-checked: #8b5cf6;
  --zui-input-checkbox-lavender-fg-checked: #ffffff;
  --zui-input-checkbox-lavender-ring-focus: #8b5cf633;
  --zui-input-checkbox-ruby-border: #be123c;
  --zui-input-checkbox-ruby-border-checked: #be123c;
  --zui-input-checkbox-ruby-bg-checked: #be123c;
  --zui-input-checkbox-ruby-fg-checked: #ffffff;
  --zui-input-checkbox-ruby-ring-focus: #be123c33;
  --zui-input-checkbox-red-border: #dc2626;
  --zui-input-checkbox-red-border-checked: #dc2626;
  --zui-input-checkbox-red-bg-checked: #dc2626;
  --zui-input-checkbox-red-fg-checked: #ffffff;
  --zui-input-checkbox-red-ring-focus: #dc262633;
  --zui-input-checkbox-slate-border: #475569;
  --zui-input-checkbox-slate-border-checked: #475569;
  --zui-input-checkbox-slate-bg-checked: #475569;
  --zui-input-checkbox-slate-fg-checked: #ffffff;
  --zui-input-checkbox-slate-ring-focus: #47556933;
  --zui-input-checkbox-zinc-border: #52525b;
  --zui-input-checkbox-zinc-border-checked: #52525b;
  --zui-input-checkbox-zinc-bg-checked: #52525b;
  --zui-input-checkbox-zinc-fg-checked: #ffffff;
  --zui-input-checkbox-zinc-ring-focus: #52525b33;
  --zui-input-checkbox-stone-border: #57534e;
  --zui-input-checkbox-stone-border-checked: #57534e;
  --zui-input-checkbox-stone-bg-checked: #57534e;
  --zui-input-checkbox-stone-fg-checked: #ffffff;
  --zui-input-checkbox-stone-ring-focus: #57534e33;
  --zui-input-checkbox-royal-border: #4338ca;
  --zui-input-checkbox-royal-border-checked: #4338ca;
  --zui-input-checkbox-royal-bg-checked: #4338ca;
  --zui-input-checkbox-royal-fg-checked: #ffffff;
  --zui-input-checkbox-royal-ring-focus: #4338ca33;
  --zui-input-checkbox-electric-border: #0ea5e9;
  --zui-input-checkbox-electric-border-checked: #0ea5e9;
  --zui-input-checkbox-electric-bg-checked: #0ea5e9;
  --zui-input-checkbox-electric-fg-checked: #ffffff;
  --zui-input-checkbox-electric-ring-focus: #0ea5e933;
  --zui-input-checkbox-forest-border: #166534;
  --zui-input-checkbox-forest-border-checked: #166534;
  --zui-input-checkbox-forest-bg-checked: #166534;
  --zui-input-checkbox-forest-fg-checked: #ffffff;
  --zui-input-checkbox-forest-ring-focus: #16653433;
  --zui-input-checkbox-sunset-border: #ea580c;
  --zui-input-checkbox-sunset-border-checked: #ea580c;
  --zui-input-checkbox-sunset-bg-checked: #ea580c;
  --zui-input-checkbox-sunset-fg-checked: #ffffff;
  --zui-input-checkbox-sunset-ring-focus: #ea580c33;
  --zui-input-checkbox-magenta-border: #c026d3;
  --zui-input-checkbox-magenta-border-checked: #c026d3;
  --zui-input-checkbox-magenta-bg-checked: #c026d3;
  --zui-input-checkbox-magenta-fg-checked: #ffffff;
  --zui-input-checkbox-magenta-ring-focus: #c026d333;
  --zui-input-checkbox-crimson-border: #b91c1c;
  --zui-input-checkbox-crimson-border-checked: #b91c1c;
  --zui-input-checkbox-crimson-bg-checked: #b91c1c;
  --zui-input-checkbox-crimson-fg-checked: #ffffff;
  --zui-input-checkbox-crimson-ring-focus: #b91c1c33;
  --zui-input-checkbox-aqua-border: #0f766e;
  --zui-input-checkbox-aqua-border-checked: #0f766e;
  --zui-input-checkbox-aqua-bg-checked: #0f766e;
  --zui-input-checkbox-aqua-fg-checked: #ffffff;
  --zui-input-checkbox-aqua-ring-focus: #0f766e33;
  --zui-input-checkbox-plum-border: #7e22ce;
  --zui-input-checkbox-plum-border-checked: #7e22ce;
  --zui-input-checkbox-plum-bg-checked: #7e22ce;
  --zui-input-checkbox-plum-fg-checked: #ffffff;
  --zui-input-checkbox-plum-ring-focus: #7e22ce33;
  --zui-input-checkbox-orange-border: #ea580c;
  --zui-input-checkbox-orange-border-checked: #ea580c;
  --zui-input-checkbox-orange-bg-checked: #ea580c;
  --zui-input-checkbox-orange-fg-checked: #ffffff;
  --zui-input-checkbox-orange-ring-focus: #ea580c33;
  --zui-input-radio-default-border: #94a3b8b3;
  --zui-input-radio-default-border-checked: #334155;
  --zui-input-radio-default-bg-checked: transparent;
  --zui-input-radio-default-dot: #e2e8f0;
  --zui-input-radio-default-border-hover: #475569;
  --zui-input-radio-default-border-focus: #475569;
  --zui-input-radio-default-ring-focus: #64748bb3;
  --zui-input-radio-default-ring-offset-checked: #ffffff;
  --zui-input-radio-default-ring-checked: #cbd5e1e6;
  --zui-input-radio-warning-border: #eab308b3;
  --zui-input-radio-warning-border-checked: #ca8a04;
  --zui-input-radio-warning-bg-checked: transparent;
  --zui-input-radio-warning-dot: #facc15;
  --zui-input-radio-warning-border-hover: #ca8a04;
  --zui-input-radio-warning-border-focus: #ca8a04;
  --zui-input-radio-warning-ring-focus: #facc15cc;
  --zui-input-radio-warning-ring-offset-checked: #ffffff;
  --zui-input-radio-warning-ring-checked: #facc15e6;
  --zui-input-radio-error-border: #f43f5eb3;
  --zui-input-radio-error-border-checked: #e11d48;
  --zui-input-radio-error-bg-checked: transparent;
  --zui-input-radio-error-dot: #fb7185;
  --zui-input-radio-error-border-hover: #e11d48;
  --zui-input-radio-error-border-focus: #e11d48;
  --zui-input-radio-error-ring-focus: #fb7185cc;
  --zui-input-radio-error-ring-offset-checked: #ffffff;
  --zui-input-radio-error-ring-checked: #fb7185e6;
  --zui-input-radio-success-border: #10b981b3;
  --zui-input-radio-success-border-checked: #059669;
  --zui-input-radio-success-bg-checked: transparent;
  --zui-input-radio-success-dot: #34d399;
  --zui-input-radio-success-border-hover: #059669;
  --zui-input-radio-success-border-focus: #059669;
  --zui-input-radio-success-ring-focus: #34d399cc;
  --zui-input-radio-success-ring-offset-checked: #ffffff;
  --zui-input-radio-success-ring-checked: #34d399e6;
  --zui-input-radio-info-border: #3b82f6b3;
  --zui-input-radio-info-border-checked: #2563eb;
  --zui-input-radio-info-bg-checked: transparent;
  --zui-input-radio-info-dot: #60a5fa;
  --zui-input-radio-info-border-hover: #2563eb;
  --zui-input-radio-info-border-focus: #2563eb;
  --zui-input-radio-info-ring-focus: #60a5facc;
  --zui-input-radio-info-ring-offset-checked: #ffffff;
  --zui-input-radio-info-ring-checked: #60a5fae6;
  --zui-input-radio-violet-border: #8b5cf6b3;
  --zui-input-radio-violet-border-checked: #7c3aed;
  --zui-input-radio-violet-bg-checked: transparent;
  --zui-input-radio-violet-dot: #a78bfa;
  --zui-input-radio-violet-border-hover: #7c3aed;
  --zui-input-radio-violet-border-focus: #7c3aed;
  --zui-input-radio-violet-ring-focus: #a78bfacc;
  --zui-input-radio-violet-ring-offset-checked: #ffffff;
  --zui-input-radio-violet-ring-checked: #a78bfae6;
  --zui-input-radio-amber-border: #f59e0bb3;
  --zui-input-radio-amber-border-checked: #d97706;
  --zui-input-radio-amber-bg-checked: transparent;
  --zui-input-radio-amber-dot: #fbbf24;
  --zui-input-radio-amber-border-hover: #d97706;
  --zui-input-radio-amber-border-focus: #d97706;
  --zui-input-radio-amber-ring-focus: #fbbf24cc;
  --zui-input-radio-amber-ring-offset-checked: #ffffff;
  --zui-input-radio-amber-ring-checked: #fbbf24e6;
  --zui-input-radio-pink-border: #ec4899b3;
  --zui-input-radio-pink-border-checked: #db2777;
  --zui-input-radio-pink-bg-checked: transparent;
  --zui-input-radio-pink-dot: #f472b6;
  --zui-input-radio-pink-border-hover: #db2777;
  --zui-input-radio-pink-border-focus: #db2777;
  --zui-input-radio-pink-ring-focus: #f472b6cc;
  --zui-input-radio-pink-ring-offset-checked: #ffffff;
  --zui-input-radio-pink-ring-checked: #f472b6e6;
  --zui-input-radio-indigo-border: #6366f1b3;
  --zui-input-radio-indigo-border-checked: #4f46e5;
  --zui-input-radio-indigo-bg-checked: transparent;
  --zui-input-radio-indigo-dot: #818cf8;
  --zui-input-radio-indigo-border-hover: #4f46e5;
  --zui-input-radio-indigo-border-focus: #4f46e5;
  --zui-input-radio-indigo-ring-focus: #818cf8cc;
  --zui-input-radio-indigo-ring-offset-checked: #ffffff;
  --zui-input-radio-indigo-ring-checked: #818cf8e6;
  --zui-input-radio-blue-border: #2563eb;
  --zui-input-radio-blue-border-checked: #2563eb;
  --zui-input-radio-blue-bg-checked: #2563eb;
  --zui-input-radio-blue-ring-focus: #2563eb33;
  --zui-input-radio-cyan-border: #0891b2;
  --zui-input-radio-cyan-border-checked: #0891b2;
  --zui-input-radio-cyan-bg-checked: #0891b2;
  --zui-input-radio-cyan-ring-focus: #0891b233;
  --zui-input-radio-green-border: #16a34a;
  --zui-input-radio-green-border-checked: #16a34a;
  --zui-input-radio-green-bg-checked: #16a34a;
  --zui-input-radio-green-ring-focus: #16a34a33;
  --zui-input-radio-lime-border: #65a30d;
  --zui-input-radio-lime-border-checked: #65a30d;
  --zui-input-radio-lime-bg-checked: #65a30d;
  --zui-input-radio-lime-ring-focus: #65a30d33;
  --zui-input-radio-mint-border: #10b981;
  --zui-input-radio-mint-border-checked: #10b981;
  --zui-input-radio-mint-bg-checked: #10b981;
  --zui-input-radio-mint-ring-focus: #10b98133;
  --zui-input-radio-ocean-border: #0284c7;
  --zui-input-radio-ocean-border-checked: #0284c7;
  --zui-input-radio-ocean-bg-checked: #0284c7;
  --zui-input-radio-ocean-ring-focus: #0284c733;
  --zui-input-radio-sapphire-border: #1d4ed8;
  --zui-input-radio-sapphire-border-checked: #1d4ed8;
  --zui-input-radio-sapphire-bg-checked: #1d4ed8;
  --zui-input-radio-sapphire-ring-focus: #1d4ed833;
  --zui-input-radio-lavender-border: #8b5cf6;
  --zui-input-radio-lavender-border-checked: #8b5cf6;
  --zui-input-radio-lavender-bg-checked: #8b5cf6;
  --zui-input-radio-lavender-ring-focus: #8b5cf633;
  --zui-input-radio-ruby-border: #be123c;
  --zui-input-radio-ruby-border-checked: #be123c;
  --zui-input-radio-ruby-bg-checked: #be123c;
  --zui-input-radio-ruby-ring-focus: #be123c33;
  --zui-input-radio-red-border: #dc2626;
  --zui-input-radio-red-border-checked: #dc2626;
  --zui-input-radio-red-bg-checked: #dc2626;
  --zui-input-radio-red-ring-focus: #dc262633;
  --zui-input-radio-slate-border: #475569;
  --zui-input-radio-slate-border-checked: #475569;
  --zui-input-radio-slate-bg-checked: #475569;
  --zui-input-radio-slate-ring-focus: #47556933;
  --zui-input-radio-zinc-border: #52525b;
  --zui-input-radio-zinc-border-checked: #52525b;
  --zui-input-radio-zinc-bg-checked: #52525b;
  --zui-input-radio-zinc-ring-focus: #52525b33;
  --zui-input-radio-stone-border: #57534e;
  --zui-input-radio-stone-border-checked: #57534e;
  --zui-input-radio-stone-bg-checked: #57534e;
  --zui-input-radio-stone-ring-focus: #57534e33;
  --zui-input-radio-royal-border: #4338ca;
  --zui-input-radio-royal-border-checked: #4338ca;
  --zui-input-radio-royal-bg-checked: #4338ca;
  --zui-input-radio-royal-ring-focus: #4338ca33;
  --zui-input-radio-electric-border: #0ea5e9;
  --zui-input-radio-electric-border-checked: #0ea5e9;
  --zui-input-radio-electric-bg-checked: #0ea5e9;
  --zui-input-radio-electric-ring-focus: #0ea5e933;
  --zui-input-radio-forest-border: #166534;
  --zui-input-radio-forest-border-checked: #166534;
  --zui-input-radio-forest-bg-checked: #166534;
  --zui-input-radio-forest-ring-focus: #16653433;
  --zui-input-radio-sunset-border: #ea580c;
  --zui-input-radio-sunset-border-checked: #ea580c;
  --zui-input-radio-sunset-bg-checked: #ea580c;
  --zui-input-radio-sunset-ring-focus: #ea580c33;
  --zui-input-radio-magenta-border: #c026d3;
  --zui-input-radio-magenta-border-checked: #c026d3;
  --zui-input-radio-magenta-bg-checked: #c026d3;
  --zui-input-radio-magenta-ring-focus: #c026d333;
  --zui-input-radio-crimson-border: #b91c1c;
  --zui-input-radio-crimson-border-checked: #b91c1c;
  --zui-input-radio-crimson-bg-checked: #b91c1c;
  --zui-input-radio-crimson-ring-focus: #b91c1c33;
  --zui-input-radio-aqua-border: #0f766e;
  --zui-input-radio-aqua-border-checked: #0f766e;
  --zui-input-radio-aqua-bg-checked: #0f766e;
  --zui-input-radio-aqua-ring-focus: #0f766e33;
  --zui-input-radio-plum-border: #7e22ce;
  --zui-input-radio-plum-border-checked: #7e22ce;
  --zui-input-radio-plum-bg-checked: #7e22ce;
  --zui-input-radio-plum-ring-focus: #7e22ce33;
  --zui-input-radio-orange-border: #ea580c;
  --zui-input-radio-orange-border-checked: #ea580c;
  --zui-input-radio-orange-bg-checked: #ea580c;
  --zui-input-radio-orange-ring-focus: #ea580c33;
  --zui-input-date-default-bg: #ffffff;
  --zui-input-date-default-border: #0000001a;
  --zui-input-date-default-fg: #000000;
  --zui-input-date-warning-bg: #713f12;
  --zui-input-date-warning-fg: #fefce8;
  --zui-input-date-error-bg: #881337;
  --zui-input-date-error-fg: #fff1f2;
  --zui-input-date-success-bg: #064e3b;
  --zui-input-date-success-fg: #ecfdf5;
  --zui-input-date-info-bg: #1e3a8a;
  --zui-input-date-info-fg: #eff6ff;
  --zui-input-date-violet-bg: #4c1d95;
  --zui-input-date-violet-fg: #f5f3ff;
  --zui-input-date-amber-bg: #78350f;
  --zui-input-date-amber-fg: #fffbeb;
  --zui-input-date-pink-bg: #831843;
  --zui-input-date-pink-fg: #fdf2f8;
  --zui-input-date-indigo-bg: #312e81;
  --zui-input-date-indigo-fg: #eef2ff;
  --zui-input-date-orange-bg: #7c2d12;
  --zui-input-date-orange-fg: #fff7ed;
  --zui-input-date-blue-border: #2563eb;
  --zui-input-date-blue-bg: #2563eb;
  --zui-input-date-blue-fg: #ffffff;
  --zui-input-date-blue-bg-hover: #2563eb;
  --zui-input-date-cyan-border: #0891b2;
  --zui-input-date-cyan-bg: #0891b2;
  --zui-input-date-cyan-fg: #083344;
  --zui-input-date-cyan-bg-hover: #0891b2;
  --zui-input-date-green-border: #16a34a;
  --zui-input-date-green-bg: #16a34a;
  --zui-input-date-green-fg: #ffffff;
  --zui-input-date-green-bg-hover: #16a34a;
  --zui-input-date-lime-border: #65a30d;
  --zui-input-date-lime-bg: #65a30d;
  --zui-input-date-lime-fg: #1a2e05;
  --zui-input-date-lime-bg-hover: #65a30d;
  --zui-input-date-mint-border: #10b981;
  --zui-input-date-mint-bg: #10b981;
  --zui-input-date-mint-fg: #064e3b;
  --zui-input-date-mint-bg-hover: #10b981;
  --zui-input-date-ocean-border: #0284c7;
  --zui-input-date-ocean-bg: #0284c7;
  --zui-input-date-ocean-fg: #082f49;
  --zui-input-date-ocean-bg-hover: #0284c7;
  --zui-input-date-sapphire-border: #1d4ed8;
  --zui-input-date-sapphire-bg: #1d4ed8;
  --zui-input-date-sapphire-fg: #ffffff;
  --zui-input-date-sapphire-bg-hover: #1d4ed8;
  --zui-input-date-lavender-border: #8b5cf6;
  --zui-input-date-lavender-bg: #8b5cf6;
  --zui-input-date-lavender-fg: #ffffff;
  --zui-input-date-lavender-bg-hover: #8b5cf6;
  --zui-input-date-ruby-border: #be123c;
  --zui-input-date-ruby-bg: #be123c;
  --zui-input-date-ruby-fg: #ffffff;
  --zui-input-date-ruby-bg-hover: #be123c;
  --zui-input-date-red-border: #dc2626;
  --zui-input-date-red-bg: #dc2626;
  --zui-input-date-red-fg: #ffffff;
  --zui-input-date-red-bg-hover: #dc2626;
  --zui-input-date-slate-border: #475569;
  --zui-input-date-slate-bg: #475569;
  --zui-input-date-slate-fg: #ffffff;
  --zui-input-date-slate-bg-hover: #475569;
  --zui-input-date-zinc-border: #52525b;
  --zui-input-date-zinc-bg: #52525b;
  --zui-input-date-zinc-fg: #ffffff;
  --zui-input-date-zinc-bg-hover: #52525b;
  --zui-input-date-stone-border: #57534e;
  --zui-input-date-stone-bg: #57534e;
  --zui-input-date-stone-fg: #ffffff;
  --zui-input-date-stone-bg-hover: #57534e;
  --zui-input-date-royal-border: #4338ca;
  --zui-input-date-royal-bg: #4338ca;
  --zui-input-date-royal-fg: #ffffff;
  --zui-input-date-royal-bg-hover: #4338ca;
  --zui-input-date-electric-border: #0ea5e9;
  --zui-input-date-electric-bg: #0ea5e9;
  --zui-input-date-electric-fg: #ffffff;
  --zui-input-date-electric-bg-hover: #0ea5e9;
  --zui-input-date-forest-border: #166534;
  --zui-input-date-forest-bg: #166534;
  --zui-input-date-forest-fg: #ffffff;
  --zui-input-date-forest-bg-hover: #166534;
  --zui-input-date-sunset-border: #ea580c;
  --zui-input-date-sunset-bg: #ea580c;
  --zui-input-date-sunset-fg: #ffffff;
  --zui-input-date-sunset-bg-hover: #ea580c;
  --zui-input-date-magenta-border: #c026d3;
  --zui-input-date-magenta-bg: #c026d3;
  --zui-input-date-magenta-fg: #ffffff;
  --zui-input-date-magenta-bg-hover: #c026d3;
  --zui-input-date-crimson-border: #b91c1c;
  --zui-input-date-crimson-bg: #b91c1c;
  --zui-input-date-crimson-fg: #ffffff;
  --zui-input-date-crimson-bg-hover: #b91c1c;
  --zui-input-date-aqua-border: #0f766e;
  --zui-input-date-aqua-bg: #0f766e;
  --zui-input-date-aqua-fg: #ffffff;
  --zui-input-date-aqua-bg-hover: #0f766e;
  --zui-input-date-plum-border: #7e22ce;
  --zui-input-date-plum-bg: #7e22ce;
  --zui-input-date-plum-fg: #ffffff;
  --zui-input-date-plum-bg-hover: #7e22ce;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-input-bg-dark: #ffffff0d;
  --zui-input-fg-dark: oklch(98.4% 0.003 247.858);
}

What it does

Inputs expose slots for icons and affixes without breaking baseline alignment.

Wire aria-invalid when validation fails and keep error text programmatically associated.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Avoid duplicating labels when placeholders are decorative only.

Common use cases

Collect account settings with inline validation.
Pair with selects and toggles for configuration wizards.
Capture search terms in filter drawers.
Power admin tables with inline editing fields.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Input component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize input with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Input implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.

Accessibility notes

Dependency notes

Inputs for accessible data entry

Default, error, and success appearances

Optional focus and hover motion

`as="textarea"`

`as="file"`

`as="checkbox"`

`as="radio"`

sm, md, lg

Disabled and read-only

Value driven by React state

Input variants playground

Inputs API

Input

Variants

Behavior

InputShared

Behavior

InputAnimated

Behavior

InputSharedAnimated

Behavior

Inputs CSS variables

What it does

Composition and API

Common use cases

Accessibility

Next.js integration notes

FAQ