Checkbox

Checkbox lets you create a single checkbox.

Make an accessible checkbox just by specifying its name

To be perfectly honest, you won’t need anything else most of the time… so why not?

<Checkbox name="checkbox" />

Checkbox

Checkbox creates a label by converting name to Title Case automatically. This works for most use cases you ever need!

Contains the standard stuff you expect

Wanna add a custom label to the checkbox? Or make the checkbox checked or disabled? They’re all relatively simple:

<Checkbox name="..." label="Custom checkbox" />
<Checkbox name="..." label="Checked" checked />
<Checkbox name="..." label="Disabled checkbox" disabled />

Custom checkbox

Checked

Disabled checkbox

Now the non-standard stuff — always send a checkbox’s value

Disabled checkboxes aren’t sent to the server when the form is submitted. If you want to send the checkbox’s value to the server, the easiest choice is use a hidden <input> element.

Checkbox makes this easy with a alwaysSend and readonly.

<Checkbox ... label="Always send" alwaysSend/>
<Checkbox ... label="Readonly" readonly/>

<div class="Checkbox">
  <div class="Checkmark">
    <input type="checkbox" ... disabled checked />
    <!-- value is 'off' when not checked -->
    <input type="hidden" value="on" />
    <!-- ... -->
  </div>
  <!-- ... -->
</div>

Always send

Readonly

Both readonly and alwayssend send on when checked and off when unchecked

Their difference: readonly has a disabled checkbox while alwayssend doesn’t.

Bind to the checkbox easily

In Svelte, this is as simple as setting bind:checked.

<script>
  let checked = false
</script>

<Checkbox ... bind:checked/>

Checkbox

Item

Data

{
  checked: false
}

Customize your checkboxes with SVG Icons

Just set icon to use over 200,000 open source icons from the iconify project. See SVG for more information.

<Checkbox icon="ph:star-fill" name="..."/>

Checkbox

Starry starry checkbox 🤗

Basic Usage

Checkbox creates a single checkbox.

<script>
  import { Checkbox } from '@splendidlabz/svelte'
</script>

<Checkbox name="terms" label="I agree to the terms"/>

Optional label

label is optional. If you don’t provide a label, Checkbox will create a label by converting name to Title Case.

<Checkbox name="checkbox"/>

Checked

If you want a checkbox to be checked, add the checked property.

<Checkbox name="terms" label="I agree to the terms" checked />

Value

Checkboxes send on (when checked) and nothing (when unchecked) when the form is submitted. You can set a value if you want to send that value instead of on.

<Checkbox name="terms" label="I agree to the terms" value="agreed" />

Disabled

To make a checkbox disabled, add the disabled property. Disabled checkboxes will not send data when submitted (even if the checkbox is checked).

<Checkbox name="disabled" label="Disabled checkbox" disabled />

Readonly

You can make a checkbox read-only with the readonly property. Use this over disabled if you want to send the checkbox state and value on form submission.

Value will be off when unchecked and on when checked.
If value is provided, value will be the provided value when checked.

Note

Native checkboxes don’t have the readonly attribute. To simulate readonly, Checkbox creates a hidden input with the same name.

<Checkbox
  name="readonly"
  label="Readonly checkbox"
  checked
  readonly
/>

<div class="Checkbox">
  <div class="Checkmark">
    <input type="checkbox" ... disabled checked />
    <input type="hidden" value="on" />
    <!-- ... -->
  </div>
  <!-- ... -->
</div>

Always send

You can also make Checkbox always send its value (even when unchecked) on form submission by setting alwaysSend. This also creates the hidden <input> like readonly, but it does not disable the checkbox.

<Checkbox name="checkbox" label="Always send" alwaysSend />

Other properties

All other properties given to Checkbox will be passed into the <input> element.

Bindings and Events

Note

The contents of this section will only work in a .svelte file and not inside an .astro file.

Checkbox element binding

You can bind to the checkbox <input> element with ref. This is useful if you need the element to handle custom events.

<script>
  let ref = null
</script>

<Checkbox ... bind:ref>

Checked State Binding

If you need to know whether the checkbox is checked, you can bind to the checked property.

<script>
  let checked = false
</script>

<Checkbox ... bind:checked/>

Checkbox

Item

Data

{
  checked: false
}

Events

Only the change event is supported on Checkbox right now. You can listen to the event like this:

<script>
  function change(event) {
    console.log(event.target.value)
  }
</script>

<Checkbox ... on:change={change} />

Note

We only support the change event because Svelte 4 doesn’t have automatic event-forwarding capability. All events will be forwarded automatically when we migrate to Svelte 5.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Basic Styles

You can import the basic styles for Checkbox through Splendid Styles.

@use '@splendidlabz/styles';

@import '@splendidlabz/styles/css';

Only necessary styles

If you wish to include only the necessary styles in your project, you can import the following files:

@use '@splendidlabz/styles/Forms/FormBase';
@use '@splendidlabz/styles/Forms/FormControls';

@import '@splendidlabz/styles/css/Forms/FormBase';
@import '@splendidlabz/styles/css/Forms/FormControls';

HTML Output

Checkbox produces the following HTML:

<div class="Checkbox">
  <div class="Checkmark">
    <input class="Field" type="checkbox" ... />
    <!-- SVG for the checkmark -->
    <svg>...</svg>
  </div>

  <!-- label -->
  <label class="Label" for="{id}">{label}</label>
</div>

Alterations

If readonly is set, Checkbox will produce an additional input element like this:

<div class="Checkbox">
  <div class="Checkmark">
    <input class="Field" type="checkbox" ... />
    <input type="hidden" ... /> <!-- readonly input -->
    <svg>...</svg>
  </div>
  <label class="Label" for="{id}">{label}</label>
</div>

If hasInput is set, Checkbox will produce an additional TextInput component like this:

<div class="Checkbox">
  <div class="Checkmark">
    <input class="Field" type="checkbox" ... />
    <svg>...</svg>
  </div>
  <label class="Label" for="{id}">{label}</label>
  <!-- HTML for TextInput goes here -->
</div>

Properties and classes

The following classes are used by Checkbox:

Class	Description
`Checkbox`	Styles the Checkbox container container
`Checkmark`	Styles the container that contains the checkmark
`Field`	Styles the `<input>`
`Label`	Styles the label

The following properties can be used to add classes to Textarea.

Property	Description
`class`	Add classes to `Checkbox`
`labelClass`	Add classes to the label
`fieldClass`	Add classes to the `<input>`
`iconClass`	Add classes to your custom SVG Icon

States

The following classes will be added to Checkbox upon the satisfaction of certain conditions:

Class	Description
`checked`	Applied when the checkbox is checked
`disabled`	Applied when the checkbox is disabled
`readonly`	Applied when the checkbox is readonly

CSS Variables

Checkbox uses the following CSS variables to define its appearance:

Variable	Description
`--border-width`	Border width of the `<input>`
`--border-style`	Border style of the `<input>`
`--border-color`	Border color of the `<input>`
`--checkbox-radius`	Border radius color of the `<input>`
`--bg-color`	Background color of the `<input>`
`--gap`	Gap between the checkbox and the label
`--size`	Size of the `<input>`

Icons

You can change the SVG icon used for Checkbox with icon. Please see SVG for instructions on using this property.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Properties

Use these properties to customize Checkbox.

Property	Type	Description
`id`	`string`	Id of the input. A random value will be created if `undefined`
`name`	`string`	Name of the input (required)
`label`	`string`	The label
`value`	`string`	Input value. Defaults to `on`. value
`checked`	`boolean`	Adds the `checked` state when present.
`disabled`	`boolean`	Adds the `disabled` state when present.
`readonly`	`boolean`	Adds the `readonly` state when present.
`ref`	`object`	Reference for the `<input>` element
`hasInput`	`boolean`	Creates an additional `TextInput` alongside the checkbox if `true`. See additional input field for usage instructions.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.