Password

A form component that masks text strings for secure password entry, featuring optional visibility toggles. 
For more information on this component configuration, visit Radix UI 

Disabled

Use the disabled class to disable the component.

Valid

Use the data-valid attr or the valid class to indicate an valid state.

Invalid

Use the data-invalid attr or the invalid class to indicate an invalid state.

Sizes

Use the input-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind 

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtleplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Customizing

:root {
  --ex-password-toggle-cursor: default;
 
  --ex-password-font-family: var(--font-sans);
  --ex-password-font-weight: var(--font-weight-normal);
 
  --ex-password-font-size-sm: var(--text-xs);
  --ex-password-font-size-md: var(--text-sm);
  --ex-password-font-size-lg: var(--text-base);
 
  --ex-password-height-sm: calc(var(--spacing) * 9);
  --ex-password-height-md: calc(var(--spacing) * 10);
  --ex-password-height-lg: calc(var(--spacing) * 11);
 
  --ex-password-px-sm: calc(var(--spacing) * 3.5);
  --ex-password-px-md: calc(var(--spacing) * 4);
  --ex-password-px-lg: calc(var(--spacing) * 4.5);
 
  --ex-password-radius-sm: var(--radius-sm);
  --ex-password-radius-md: var(--radius-sm);
  --ex-password-radius-lg: var(--radius-sm);
}

API

For more information on this component configuration, visit Radix UI