Field

Source

• Field.css

Example

<div class="x-field">
    <label class="x-label">Label</label>
    <div class="x-control">
        <input type="text" required>
    </div>
    <em class="x-info text-error" hidden>Info</em>
</div>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/field/default.css" layer(utilities);

/* Example customization */
@layer utilities {
  .x-field.is-compact {
    padding: 0.5rem;
  }
}

Winduum CSS Code

winduum/src/components/field/default.css

.x-field {
  gap: var(--x-field-gap, calc(var(--spacing) * 2));
  display: flex;
  flex-direction: column;

  &:has(:user-invalid) {
    :where(.x-info[hidden]) {
      display: revert;
    }
  }

  &:has([required]) :where(.x-label) {
    &::after {
      color: var(--x-field-required-color, var(--color-error));
      content: " *";
    }
  }
}