Winnie CSS
  1. Primitives
  2. field

field

Labelling and validation for form controls. 

<div data-component="field">
  <label data-slot="label">Dish Name</label>
  <div data-component="input-group" data-slot="control">
    <input data-component="input" data-slot="input" />
  </div>
</div>

Import

Import just the field styles.

@import "@winnie-ui/css/spatial/field";
@import "@winnie-ui/css/visual/field";

Anatomy

Attach the appropriate data attributes in the structure below.

<div data-component="field">
  <label data-slot="label" />
  <span data-slot="description" />
  <input data-slot="control" />
  <span data-slot="validation" />
</div>

Examples

Description

Add a description with the description slot attribute as a child of the field.

Provide a mouth-watering name for your dish. 
<div data-component="field">
  <label data-slot="label">Dish Name</label>
  <span data-slot="description">
    Provide a mouth-watering name for your dish.
  </span>
  <div data-component="input-group" data-slot="control">
    <input data-component="input" data-slot="input" />
  </div>
</div>

Trailing

Place the description slot after the control slot to place it below the control.

Provide a mouth-watering name for your dish. 
<div data-component="field">
  <label data-slot="label">Dish Name</label>
  <div data-component="input-group" data-slot="control">
    <input data-component="input" data-slot="input" />
  </div>
  <span data-slot="description">
    Provide a mouth-watering name for your dish.
  </span>
</div>

Validation

Add a validation message with the validation slot attribute as a child of the field.

Oops, don't forget to add a name. 
<div data-component="field">
  <label data-slot="label">Dish Name</label>
  <div data-component="input-group" data-slot="control">
    <input data-component="input" data-slot="input" />
  </div>
  <span data-slot="validation">Oops, don't forget to add a name.</span>
</div>

Reference

field

Groups all of the parts of the field together.

Variable
--wui-field-label-color
--wui-field-label-font-weight
--wui-field-description-color
--wui-field-description-font-weight
--wui-field-validation-color
--wui-field-validation-font-weight