Inputs

Form controls and data entry components.

Inputs are form controls styled with the @ds-input mixin. They follow the "Smart Mixin" pattern, providing responsive sizing and consistent state management for focus, hover, and validation states.

.input { @ds-input(outlined neutral) }

Interactive Playground

VariantToneDensity (Padding)2Radius2Shadow0

Force HoverForce Focus

.my-input {
  @ds-input(outlined neutral density(2) radius(2));
}

Resolved CSS Output for .my-input

.my-input {
  border: 1px solid palette(neutral-main);
  
  padding: density(2);
  border-radius: radius(2);
  

  &:focus {
    border-color: palette(primary-main);
    box-shadow: ring(2);
  }
}

Mixin Documentation

The @ds-input mixin is the primary primitive for form controls. It accepts a Variant (structure) and Tone (validation state), followed by optional granular tokens for Density (padding), Radius, and Shadow. It automatically handles Focus rings and validation styling.

Smart Parameters:

variant: contained, outlined, underline.
tone: neutral (default), primary, success, error. Applies border colors.
density(N): Responsive padding (0-5).
radius(N): Border radius (0-5).
shadow(N): Box shadow depth (0-5).

Examples

@ds-input(contained primary)

@ds-input(outlined primary)

@ds-input(underline primary)

@ds-input(outlined error)

@ds-input(outlined success)