Check

Check supports checkbox and radio input types

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-elements 
• winduum-stimulus 
• winduum-vue 
• winduum-react 

Styles

Variants

• default 
• interactive 
• invalid 

Props

• default 
• interactive 

Examples

Basic

winduum

<div class="x-check">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Checkbox</label>
</div>
<label class="x-check">
    <input type="checkbox">
</label>

winduum-vue

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

<template>
    <Check>
        <input type="checkbox">
        Checkbox
    </Check>
    <Check>
        <input type="checkbox">
    </Check>
</template>

winduum-react

import { Check } from "@/components/check"

export function Example() {
    return (
        <>
            <Check>
                <input type="checkbox" />
                Checkbox
            </Check>
            <Check>
                <input type="checkbox" />
            </Check>
        </>
    )
}

winduum

<div class="x-check">
    <input type="radio" name="radio" id="radio">
    <label for="radio">Radio</label>
</div>
<label class="x-check">
    <input type="radio" name="radio">
</label>

winduum-vue

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

<template>
    <Check>
        <input type="radio">
        Radio
    </Check>
    <Check>
        <input type="radio">
    </Check>
</template>

winduum-react

import { Check } from "@/components/check"

export function Example() {
    return (
        <>
            <Check>
                <input type="radio" />
                Radio
            </Check>
            <Check>
                <input type="radio" />
            </Check>
        </>
    )
}

Label

<div class="x-check">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Checkbox</label>
</div>

<div class="x-check">
    <input type="radio" id="radio">
    <label for="radio">Radio</label>
</div>

Required

<div class="x-check">
    <input type="checkbox" id="checkbox" required>
    <label for="checkbox">Checkbox</label>
</div>

<div class="x-check">
    <input type="radio" id="radio" required>
    <label for="radio">Radio</label>
</div>

Disabled

<div class="x-check">
    <input type="checkbox" id="checkbox" disabled>
    <label for="checkbox">Checkbox</label>
</div>
<label class="x-check">
    <input type="checkbox" disabled>
</label>

<div class="x-check">
    <input type="radio" id="radio" disabled>
    <label for="radio">Radio</label>
</div>
<label class="x-check">
    <input type="radio" disabled>
</label>

Validation

<div class="x-check">
    <input type="checkbox" id="checkbox" required>
    <label for="checkbox">Checkbox</label>
</div>

<div class="x-check">
    <input type="radio" id="radio" required>
    <label for="radio">Radio</label>
</div>