mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
100 lines
3.6 KiB
Plaintext
100 lines
3.6 KiB
Plaintext
---
|
|
layout: layouts/component.njk
|
|
title: Checkbox
|
|
description: A control that allows the user to toggle between checked and not checked.
|
|
toc:
|
|
- label: Usage
|
|
id: usage
|
|
- label: Examples
|
|
id: examples
|
|
children:
|
|
- label: Disabled
|
|
id: example-disabled
|
|
- label: With text
|
|
id: example-with-text
|
|
- label: Form
|
|
id: example-form
|
|
---
|
|
|
|
{% from "macros/code_preview.njk" import code_preview %}
|
|
{% from "macros/code_block.njk" import code_block %}
|
|
|
|
{% set code %}<label class="label gap-3">
|
|
<input type="checkbox" class="input">
|
|
Accept terms and conditions
|
|
</label>{% endset %}
|
|
{{ code_preview("checkbox", code) }}
|
|
|
|
<h2 id="usage">Usage</h2>
|
|
|
|
<section class="prose my-6">
|
|
<p>Simply add the <code>input</code> class to your <code><input type="radio"></code> elements or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). You can also set the <code>aria-invalid</code> attribute to <code>true</code> to make the input invalid.</p>
|
|
</section>
|
|
|
|
{{ code_block(code) }}
|
|
|
|
<h2 id="examples"><a href="#examples">Examples</a></h2>
|
|
|
|
<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
|
|
|
|
{% set code %}<label class="label gap-3">
|
|
<input type="checkbox" class="input" disabled>
|
|
Accept terms and conditions
|
|
</label>{% endset %}
|
|
{{ code_preview("checkbox-disabled", code) }}
|
|
|
|
<h3 id="example-with-text"><a href="#example-with-text">With text</a></h3>
|
|
|
|
{% set code %}<div class="flex items-start gap-3">
|
|
<input type="checkbox" id="checkbox-with-text" class="input">
|
|
<div class="grid gap-2">
|
|
<label for="checkbox-with-text" class="label">Accept terms and conditions</label>
|
|
<p class="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
|
|
</div>
|
|
</div>{% endset %}
|
|
{{ code_preview("checkbox-with-text", code) }}
|
|
|
|
<h3 id="example-form"><a href="#example-form">Form</a></h3>
|
|
|
|
{% set code %}<form class="form flex flex-row items-start gap-3 rounded-md border p-4 shadow-xs">
|
|
<input type="checkbox" id="checkbox-form-1">
|
|
<div class="flex flex-col gap-1">
|
|
<label for="checkbox-form-1" class="leading-snug">Use different settings for my mobile devices</label>
|
|
<p class="text-muted-foreground text-sm leading-snug">You can manage your mobile notifications in the mobile settings page.</p>
|
|
</div>
|
|
</form>{% endset %}
|
|
{{ code_preview("input-form", code) }}
|
|
|
|
{% set code %}<form class="form flex flex-col gap-4">
|
|
<header>
|
|
<label for="demo-form-checkboxes" class="text-base leading-normal">Sidebar</label>
|
|
<p class="text-muted-foreground text-sm">Select the items you want to display in the sidebar.</p>
|
|
</header>
|
|
<fieldset id="demo-form-checkboxes" class="flex flex-col gap-2">
|
|
<label class="font-normal leading-tight">
|
|
<input type="checkbox" name="demo-form-checkboxes" value="1" checked>
|
|
Recents
|
|
</label>
|
|
<label class="font-normal leading-tight">
|
|
<input type="checkbox" name="demo-form-checkboxes" value="2" checked>
|
|
Home
|
|
</label>
|
|
<label class="font-normal leading-tight">
|
|
<input type="checkbox" name="demo-form-checkboxes" value="3">
|
|
Applications
|
|
</label>
|
|
<label class="font-normal leading-tight">
|
|
<input type="checkbox" name="demo-form-checkboxes" value="4">
|
|
Desktop
|
|
</label>
|
|
<label class="font-normal leading-tight">
|
|
<input type="checkbox" name="demo-form-checkboxes" value="5">
|
|
Download
|
|
</label>
|
|
<label class="font-normal leading-tight">
|
|
<input type="checkbox" name="demo-form-checkboxes" value="6">
|
|
Documents
|
|
</label>
|
|
</fieldset>
|
|
</form>{% endset %}
|
|
{{ code_preview("input-form", code) }} |