@layer utilities {
  [data-ui="input"],
  [data-ui="input-wrapper"] {
    --icon-size: 16px;
    --inline-padding: var(--spacing-10);
    --surface-low: var(--color-surface-container-low);

    width: 100%;
    position: relative;
    height: 36px;
    border: 1px solid var(--color-surface-variant);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: 0 1px 2px 0 color-mix(in srgb, currentcolor 3%, transparent);
    color: var(--color-on-background);
    font: var(--font-body-md);
    outline: 0;
    transition: all var(--transition-expressive-fast-effects);

    /* Placeholder */
    &::placeholder {
      color: color-mix(in oklab, currentcolor 50%, transparent);
      transition: all var(--transition-expressive-fast-effects);
    }

    /* Focuse */
    &:focus-within {
      border-color: var(--color-outline);
      box-shadow: 0 0 0 2px var(--color-primary-container);
    }

    /* hover */
    &:hover:not(:focus-within, :disabled) {
      background-color: var(--surface-low);

      &::placeholder {
        color: var(--color-on-surface-variant);
      }
    }

    /* Disabled */
    &:disabled,
    &:has(input:disabled) {
      border-color: transparent;
      background-color: var(--surface-low);
      color: color-mix(in oklab, currentcolor 50%, transparent);
      box-shadow: none;
    }

    /* Invalid */
    &[data-invalid] {
      border-color: var(--color-error);

      &:focus-within {
        box-shadow: 0 0 0 2px var(--color-error-container);
      }
    }
  }

  [data-ui="input"] {
    padding-inline: var(--inline-padding);
  }
}
Preview

Installation

Usage

API Reference

Input

Examples

Disabled

With Label

On this page
