Color

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

View Source 

Usage

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

Variants

• default 
• interactive 

Props

• default 
• interactive 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Basic

html

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

vue

<script setup lang="ts">
    import { Color } from '@/components/color'
</script>

<template>
    <Color style="color: red">
        <input type="checkbox" aria-label="Red">
    </Color>
    <Color style="color: blue">
        <input type="checkbox" aria-label="Blue">
    </Color>
    <Color style="color: red; --x-color-secondary: blue;">
        <input type="checkbox" aria-label="Red & Blue">
    </Color>
</template>

jsx

import { Color } from "@/components/color"

export function Example() {
    return (
        <>
            <Color style="color: red">
                <input type="checkbox" aria-label="Red" />
            </Color>
            <Color style="color: blue">
                <input type="checkbox" aria-label="Blue" />
            </Color>
            <Color style="color: red; --x-color-secondary: blue;">
                <input type="checkbox" aria-label="Red & Blue" />
            </Color>
        </>
    )
}

Disabled

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