Form

Input Checkbox

Labelled checkbox combining Checkbox and Label, with built-in required indicator.

Overview

InputCheckbox combines a Checkbox with a Label in one component, so you get a labelled checkbox without manually wiring them together. Use it for consent rows, single opt-ins, and short form fields where every checkbox needs its own label.

For multi-select groups inside a Field, use Checkbox directly so the Field's label covers the group.

Key Business & UX Benefits

Label-checkbox pairing in one component removes the most common accessibility bug on consent rows, where a missing for attribute blocks click-to-toggle for assistive tech.
Built-in required indicator makes legally mandatory consent (terms, marketing opt-in) visually obvious, supporting compliance without bespoke styling.
One component per row keeps consent screens fast to ship for legal updates, which matters when regulations change on short notice.

Pro-Tip from Larry: Use InputCheckbox when you need a labelled checkbox so the label is always associated.

Usage

LInputCheckbox

<LInputCheckbox label="Label" required />

Feature List

Pairs `Checkbox` with `Label` and wires the `for`/`id` association, so click-to-toggle works for assistive tech
Built-in required indicator visually marks legally mandatory consents like terms and marketing opt-ins
Inherits `<LField>` context (`disabled`, `required`, `invalid`, `errorMessage`), so consent rows pick up form state automatically
v-model passes through to the underlying Checkbox, supporting `'indeterminate'` for parent/child consent grouping
Drop-in replacement for raw `<input type="checkbox">` plus `<label>` markup, with focus-visible and disabled chrome included

API Reference

Prop	Default	Type
`id`		`string`
`defaultChecked`	`false`	`boolean \| "indeterminate"`
`disabled`	`false`	`boolean`
`name`		`string`
`value`	`on`	`string`
`required`	`false`	`boolean` Whether the label's corresponding input is required or not.
`size`	`s`	`"s" \| "m"` The label's font size.
`forId`		`string` The id of the element that the label is for.
`label`		`string`
`invalid`	`false`	`boolean`
`modelValue`		`boolean \| "indeterminate"`

Event	Type
`update:modelValue`	`(event: "update:modelValue", value: boolean \| "indeterminate" \| undefined): void`

Edit this pageorReport an issue

Input Autocomplete

Single-select autocomplete input driven by an options array.

Input Combobox

Single or multi-select combobox with a custom display formatter for the chosen value.