3.0.0-alpha.4 Alpha
Light Dark Light Dark System Search /

Component Groups

For components that share similar qualities, Web Awesome includes custom properties to change the appearance of these related components all at once.

Form Controls

Components such as input, select, textarea, checkbox, etc. share a number of styles to give your forms a cohesive appearance. Web Awesome defines custom properties for these styles using the format --wa-form-control-{style}.

Not every form control uses all of these custom properties. For example, <wa-radio> defines its own height and border radius to achieve its familiar shape but shares many other styles with other components for a cohesive look and feel. Similarly, <wa-button> defines many of its own styles but matches the height and border width of other form controls.

Custom Property Default Value
--wa-form-control-background-color var(--wa-color-surface-default)
--wa-form-control-border-style var(--wa-border-style)
--wa-form-control-border-width var(--wa-border-width-s)
--wa-form-control-border-radius var(--wa-border-radius-s)
--wa-form-control-activated-color var(--wa-color-brand-fill-loud)
--wa-form-control-resting-color var(--wa-color-neutral-border-loud)
--wa-form-control-label-color var(--wa-color-neutral-border-loud)
--wa-form-control-label-font-weight var(--wa-font-weight-normal)
--wa-form-control-label-line-height var(--wa-line-height-normal)
--wa-form-control-value-color var(--wa-color-text-normal)
--wa-form-control-value-font-weight var(--wa-font-weight-body)
--wa-form-control-value-line-height var(--wa-line-height-condensed)
--wa-form-control-placeholder-color var(--wa-color-gray-60)
--wa-form-control-height-s calc(var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height))
--wa-form-control-height-m calc(var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height))
--wa-form-control-height-l calc(var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height))
--wa-form-control-required-content '*'
--wa-form-control-required-content-color inherit
--wa-form-control-required-content-offset -0.1em 
<form class="wa-block-spacing-l">
  <wa-input label="Input" placeholder="Placeholder"></wa-input>
  <wa-select label="Select" value="option-1">
    <wa-option value="option-1">Option 1</wa-option>
    <wa-option value="option-2">Option 2</wa-option>
    <wa-option value="option-3">Option 3</wa-option>
  </wa-select>
  <wa-textarea label="Textarea" placeholder="Placeholder"></wa-textarea>
  <wa-radio-group label="Radio group" name="a" value="1">
    <wa-radio value="1">Option 1</wa-radio>
    <wa-radio value="2">Option 2</wa-radio>
    <wa-radio value="3">Option 3</wa-radio>
  </wa-radio-group>
  <wa-checkbox>Checkbox</wa-checkbox>
  <wa-switch>Switch</wa-switch>
  <wa-range label="Range"></wa-range>
  <wa-button>Button</wa-button>
</form>

<style>
  .wa-block-spacing-l > * + *, wa-radio {
    display: block;
    margin-block-start: var(--wa-space-l);
  }
  wa-radio {
    margin-block-start: var(--wa-space-2xs);
  }
  wa-radio, wa-checkbox, wa-switch, wa-button {
    width: fit-content;
  }
</style>

Panels

Panels consist of components with larger, contained surface areas like callout, card, details, and dialog.

Custom Property Default Value
--wa-panel-border-style var(--wa-border-style)
--wa-panel-border-width var(--wa-border-width-s)
--wa-panel-border-radius var(--wa-border-radius-m) 
<div class="wa-block-spacing-l">
  <wa-callout>
    <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
    This is a simple callout with an icon.
  </wa-callout>
  <wa-card>Here's a basic, no-nonsense card.</wa-card>
  <wa-details summary="Details">
    <code>wa-details</code>, at your service.
  </wa-details>
</div>

<style>
  .wa-block-spacing-l > * + * {
    display: block;
    margin-block-start: var(--wa-space-l);
  }
</style>

Tooltips

Tooltip styles are shared between the tooltip component and the tooltip implementation in range.

Custom Property Default Value
--wa-tooltip-arrow-size 0.375rem (6px)
--wa-tooltip-background-color var(--wa-color-neutral-fill-loud)
--wa-tooltip-border-radius var(--wa-border-radius-s)
--wa-tooltip-content-color var(--wa-color-neutral-on-loud)
--wa-tooltip-font-size var(--wa-font-size-s)
--wa-tooltip-line-height var(--wa-line-height-normal)
This is a tooltip 
<wa-icon-button id="bullseye-example" label="Button" name="bullseye"></wa-icon-button>
<wa-tooltip for="bullseye-example" open trigger="manual">This is a tooltip</wa-tooltip>
    No results