TextField theming

The values listed below are exposed as --rozie-text-field-* custom properties, each with a built-in fallback, so TextField works with zero configuration and re-skins by remapping tokens. The structural rules compile per-leaf and are not consumer-overridable.

:root {
  --rozie-text-field-width: 100%;
  --rozie-text-field-label-size: 0.875rem;
  --rozie-text-field-bg: #fff;
  --rozie-text-field-adornment-gap: 0.5rem;
}

Tokens

field column

Token	Default
--rozie-text-field-width	100%
--rozie-text-field-gap	0.375rem
--rozie-text-field-font	inherit
--rozie-text-field-color	inherit

label

Token	Default
--rozie-text-field-label-size	0.875rem
--rozie-text-field-label-weight	500
--rozie-text-field-label-color	inherit

control box

Token	Default
--rozie-text-field-bg	#fff
--rozie-text-field-border-width	1px
--rozie-text-field-border-color	rgba(0, 0, 0, 0.25)
--rozie-text-field-radius	0.5rem
--rozie-text-field-padding-x	0.75rem
--rozie-text-field-padding-y	0.5rem
--rozie-text-field-line-height	1.5
--rozie-text-field-placeholder-color	rgba(0, 0, 0, 0.45)
--rozie-text-field-resize	vertical

prefix / suffix adornments

Token	Default
--rozie-text-field-adornment-gap	0.5rem
--rozie-text-field-adornment-color	rgba(0, 0, 0, 0.55)

focus

Token	Default
--rozie-text-field-focus-color	#2563eb
--rozie-text-field-focus-ring	rgba(37, 99, 235, 0.25)
--rozie-text-field-focus-ring-width	3px

invalid

Token	Default
--rozie-text-field-error-color	#dc2626
--rozie-text-field-error-ring	rgba(220, 38, 38, 0.25)

disabled

Token	Default
--rozie-text-field-disabled-bg	rgba(0, 0, 0, 0.04)
--rozie-text-field-disabled-opacity	0.6

description, error and counter text

Token	Default
--rozie-text-field-help-size	0.8125rem
--rozie-text-field-description-color	rgba(0, 0, 0, 0.6)

Design-system bridges

Each package ships token presets that map TextField's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/text-field-react/themes/base.css';
import '@rozie-ui/text-field-react/themes/bootstrap.css';
import '@rozie-ui/text-field-react/themes/material.css';
import '@rozie-ui/text-field-react/themes/shadcn.css';

See also

• TextField — showcase & API — the full prop / event / slot / handle reference.
• TextField — API reference — every prop, event, slot, and handle verb.
• TextField — usage examples — idiomatic per-framework consumption code.
• TextField comparison — how it stacks up against the per-framework libraries.
• TextField — live demo — the Vue leaf's workspace build running in the page (not yet the published npm package).