Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Styling

The component does not expose a separate OTP-only token contract. Style it the same way the wrapper does internally: by setting semantic foreground, border, background, and accent tokens on a wrapper around <tng-input-otp> (custom properties inherit into the component).

Theming surface

A wrapper class is the stable public styling hook. The projected slots inherit the semantic tokens you set on that ancestor.

Wrapper-level theming

css
/* Scope semantic tokens on a wrapper around <tng-input-otp>; they inherit into the component. */
.project-otp-shell {
  --tng-semantic-background-surface: var(--tng-semantic-background-surface);
  --tng-semantic-background-muted: color-mix(
    in srgb,
    var(--tng-semantic-accent-brand) 10%,
    var(--tng-semantic-background-base)
  );
  --tng-semantic-border-default: var(--tng-semantic-border-subtle);
  --tng-semantic-foreground-primary: var(--tng-semantic-foreground-primary);
  --tng-semantic-foreground-muted: var(--tng-semantic-foreground-muted);
  --tng-semantic-accent-brand: var(--tng-semantic-accent-brand);
  --tng-semantic-accent-danger: var(--tng-semantic-accent-danger);
}

Styling variants

Both examples use the same component and only change the wrapper-level semantic tokens.

Input OTP styling (Plain-CSS)

Review code

The wrapper keeps the OTP behavior stable while your host class supplies the visual theme.

Guidance

  • Use wrapper-level semantic tokens for color, border, and focus treatments.
  • Reach for the headless primitive when you need to own the slot markup itself.
  • Keep completion and invalid feedback visible when the code is partially filled.