Skip to content

Color

Color supports checkbox and radio input types for displaying selected color.

View Source 

Usage

css
@import "winduum/src/ui/color/index.css" layer(components);

Variants

  • default 
  • interactive 

Props

  • default-props 
  • interactive-props 

Examples

Basic

html
<label class="ui-color" style="color: red">
    <input type="checkbox" aria-label="Red">
</label>
<label class="ui-color" style="color: blue">
    <input type="checkbox" aria-label="Blue">
</label>
<label class="ui-color" style="color: red; --ui-color-secondary: blue;">
    <input type="checkbox" aria-label="Red & Blue">
</label>

Disabled

html
<label class="ui-color" style="color: red">
    <input type="checkbox" disabled>
</label>
<label class="ui-color" style="color: blue">
    <input type="checkbox" disabled>
</label>
<label class="ui-color" style="color: red; --ui-color-secondary: blue;">
    <input type="checkbox" disabled>
</label>

Released under the MIT License.