Checkbox
Setup
<script>
import { Checkbox, Helper, Label } from 'svelte-5-ui-lib';
</script>
Interactive Checkbox Builder
<Checkbox>My Checkbox</Checkbox>
Bordered
<script lang="ts">
import { Checkbox } from 'svelte-5-ui-lib';
</script>
<div class="rounded border border-gray-200 dark:border-gray-700">
<Checkbox classLabel="w-full p-4">Default radio</Checkbox>
</div>
<div class="rounded border border-gray-200 dark:border-gray-700">
<Checkbox checked classLabel="w-full p-4">Checked state</Checkbox>
</div>
Button
<script lang="ts">
import { CheckboxButton, ButtonGroup } from 'svelte-5-ui-lib';
import { AppleSolid, FacebookSolid, DiscordSolid, DropboxSolid } from 'flowbite-svelte-icons';
</script>
<div class="mb-4 space-y-2">
<CheckboxButton><AppleSolid class="me-2 h-6 w-6" />Apple</CheckboxButton>
<CheckboxButton><FacebookSolid class="me-2 h-6 w-6" />Facebook</CheckboxButton>
<CheckboxButton><DiscordSolid class="me-2 h-6 w-6" />Discord</CheckboxButton>
<CheckboxButton><DropboxSolid class="me-2 h-6 w-6" />Dropbox</CheckboxButton>
</div>
<ButtonGroup>
<CheckboxButton><AppleSolid class="me-2 h-6 w-6" />Apple</CheckboxButton>
<CheckboxButton><FacebookSolid class="me-2 h-6 w-6" />Facebook</CheckboxButton>
<CheckboxButton><DiscordSolid class="me-2 h-6 w-6" />Discord</CheckboxButton>
<CheckboxButton class="hidden sm:inline-flex"
><DropboxSolid class="me-2 h-6 w-6" />Dropbox</CheckboxButton
>
</ButtonGroup>
Dropdown
<script lang="ts">
import { sineIn } from 'svelte/easing';
import { Button, Dropdown, DropdownHeader, DropdownUl, Search, Checkbox, uiHelpers } from 'svelte-5-ui-lib';
import { ChevronDownOutline } from 'flowbite-svelte-icons';
let transitionParams = {
y: 0,
duration: 200,
easing: sineIn
};
let dropdown = uiHelpers();
let dropdownStatus = $state(false);
let closeDropdown = dropdown.close;
$effect(() => {
// this can be done adding nav.navStatus directly to DOM element
// without using effect
dropdownStatus = dropdown.isOpen;
});
</script>
<div class="h-56">
<div class="flex justify-center">
<Button onclick={dropdown.toggle}
>Project users<ChevronDownOutline class="ms-2 h-6 w-6 text-white dark:text-white" /></Button
>
<div class="relative">
<Dropdown
{dropdownStatus}
{closeDropdown}
params={transitionParams}
class="absolute top-[45px] -left-[190px] w-52 overflow-y-auto p-2 pb-3 text-sm"
>
<div class="relative">
<DropdownHeader>
<div class="p-0">
<Search size="md" />
</div>
</DropdownHeader>
<DropdownUl>
<li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
<Checkbox>Robert Gouth</Checkbox>
</li>
<li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
<Checkbox>Bonnie Green</Checkbox>
</li>
</DropdownUl>
</div>
</Dropdown>
</div>
</div>
</div>
Group variable
Group: 2,3
<script lang="ts">
import { Checkbox, Button, type CheckboxItem } from 'svelte-5-ui-lib';
let choices: CheckboxItem[] = [
{ value: '1', checkboxLabel: 'One' },
{ value: '2', checkboxLabel: 'Two' },
{ value: '3', checkboxLabel: 'Three' }
];
let group: (string | number)[] = $state(['2', '3']);
const clearGroup = () => {
group = [];
};
</script>
<div class="flex gap-2">
<Checkbox name="flavours" {choices} bind:group />
</div>
<div
class="my-2 w-44 rounded-lg border border-gray-200 p-2 dark:border-gray-700 dark:text-gray-400"
>
Group: {group}
</div>
<Button onclick={clearGroup}>Clear</Button>
Horizontal list
Identification
<script lang="ts">
import { Checkbox } from 'svelte-5-ui-lib';
</script>
<p class="mb-4 font-semibold text-gray-900 dark:text-white">Identification</p>
<ul
class="w-full items-center divide-x divide-gray-200 rounded-lg border border-gray-200 sm:flex rtl:divide-x-reverse dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-800"
>
<li class="w-full">
<Checkbox checked classLabel="p-3">Svelte</Checkbox>
</li>
<li class="w-full"><Checkbox classLabel="p-3">Vue JS</Checkbox></li>
<li class="w-full"><Checkbox classLabel="p-3">React</Checkbox></li>
<li class="w-full"><Checkbox classLabel="p-3">Angular</Checkbox></li>
</ul>
Inline layout
<script lang="ts">
import { Checkbox } from 'svelte-5-ui-lib';
</script>
<div class="flex gap-3">
<Checkbox>Inline 1</Checkbox>
<Checkbox>Inline 2</Checkbox>
<Checkbox checked>Inline checked</Checkbox>
<Checkbox disabled>Inline disabled</Checkbox>
</div>
Link
<script lang="ts">
import { Checkbox } from 'svelte-5-ui-lib';
</script>
<Checkbox>
I agree with the
<a href="/" class="text-primary-600 dark:text-primary-500 ms-1 hover:underline"
>terms and conditions</a
>
.
</Checkbox>
List group
Technology
<script lang="ts">
import { Checkbox } from 'svelte-5-ui-lib';
</script>
<p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology</p>
<ul
class="w-48 divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-800"
>
<li><Checkbox checked classLabel="p-3">svelte</Checkbox></li>
<li><Checkbox classLabel="p-3">Vue JS</Checkbox></li>
<li><Checkbox classLabel="p-3">React</Checkbox></li>
<li><Checkbox classLabel="p-3">Angular</Checkbox></li>
</ul>
Table
| Left column | Right column |
|---|---|
<script lang="ts">
import {
Checkbox,
Label,
Table,
TableBody,
TableBodyCell,
TableBodyRow,
TableHead,
TableHeadCell
} from 'svelte-5-ui-lib';
</script>
<Table>
<TableHead>
<TableHeadCell>Left column</TableHeadCell>
<TableHeadCell>Right column</TableHeadCell>
</TableHead>
<TableBody class="divide-y dark:divide-gray-700">
<TableBodyRow class="divide-x rtl:divide-x-reverse dark:divide-gray-700">
<TableBodyCell><Label for="checkbox1">Default checkbox</Label></TableBodyCell>
<TableBodyCell><Label for="checkbox2">Disabled checkbox</Label></TableBodyCell>
</TableBodyRow>
<TableBodyRow class="divide-x rtl:divide-x-reverse dark:divide-gray-700">
<TableBodyCell><Checkbox id="checkbox1" checked /></TableBodyCell>
<TableBodyCell><Checkbox id="checkbox2" disabled /></TableBodyCell>
</TableBodyRow>
</TableBody>
</Table>
Advanced
Choose technology:
<script lang="ts">
import { Checkbox } from 'svelte-5-ui-lib';
import React from '../../../utils/icons/React.svelte';
import Vue from '../../../utils/icons/Vue.svelte';
import Angular from '../../../utils/icons/Angular.svelte';
</script>
<p class="mb-5 text-lg font-medium text-gray-900 dark:text-white">Choose technology:</p>
<div class="grid w-full gap-6 md:grid-cols-3">
<Checkbox custom>
<button
class="peer-checked:border-primary-600 w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 text-left font-normal text-gray-500 peer-checked:text-gray-600 hover:bg-gray-50 hover:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:peer-checked:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-300"
>
<React />
<p class="w-full text-lg font-semibold">React Js</p>
<p class="w-full text-sm">A JavaScript library for building user interfaces.</p>
</button>
</Checkbox>
<Checkbox custom>
<button
class="peer-checked:border-primary-600 w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 text-left font-normal text-gray-500 peer-checked:text-gray-600 hover:bg-gray-50 hover:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:peer-checked:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-300"
>
<Vue />
<p class="w-full text-lg font-semibold">Vue Js</p>
<p class="w-full text-sm">Vue.js is an model–view front end JavaScript framework.</p>
</button>
</Checkbox>
<Checkbox custom>
<button
class="peer-checked:border-primary-600 w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 text-left font-normal text-gray-500 peer-checked:text-gray-600 hover:bg-gray-50 hover:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:peer-checked:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-300"
>
<Angular />
<p class="w-full text-lg font-semibold">Angular</p>
<p class="w-full text-sm">A TypeScript-based web application framework.</p>
</button>
</Checkbox>
</div>