Skip to content

Check

Check supports checkbox and radio input types

View Source 

Usage

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

Variants

  • default 
  • interactive 

Tokens

  • invalid 

Props

  • default-props 
  • interactive-props 

Examples

Basic

html
<div class="ui-check">
    <input type="checkbox">
    Checkbox
</div>
<label class="ui-check">
    <input type="checkbox">
</label>
html
<div class="ui-check">
    <input type="radio" name="radio">
    Radio
</div>
<label class="ui-check">
    <input type="radio" name="radio">
</label>

Label

html
<div class="ui-check">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Checkbox</label>
</div>
html
<div class="ui-check">
    <input type="radio" id="radio">
    <label for="radio">Radio</label>
</div>

Required

html
<div class="ui-check">
    <input type="checkbox" id="checkbox" required>
    <label for="checkbox">Checkbox</label>
</div>
html
<div class="ui-check">
    <input type="radio" id="radio" required>
    <label for="radio">Radio</label>
</div>

Disabled

html
<div class="ui-check">
    <input type="checkbox" disabled>
    Checkbox
</div>
<label class="ui-check">
    <input type="checkbox" disabled>
</label>
html
<div class="ui-check">
    <input type="radio" disabled>
    Radio
</div>
<label class="ui-check">
    <input type="radio" disabled>
</label>

Validation

html
<form class="validated">
    <div class="ui-check">
        <input type="checkbox" id="checkbox" required>
        <label for="checkbox">Checkbox</label>
    </div>
</form>
html
<form class="validated">
    <div class="ui-check">
        <input type="radio" id="radio" required>
        <label for="radio">Radio</label>
    </div>
</form>

Released under the MIT License.