Checkbox Component

Figma

The glu-checkbox component is a composite checkbox that supports advanced states—unchecked, checked, and optionally indeterminate—and provides flexible labeling. You can display a label on the left and/or right of the checkbox, and include helper text or error messages below the checkbox. The component is designed to be fully accessible with proper ARIA attributes and keyboard interactions, and it emits a glChange event when the checkbox state is toggled.

Below are several examples that demonstrate the versatility of the checkbox component.

---

Basic Usage

Example 1: Basic Unchecked Checkbox

HTML

Result

Loading...

Live Editor

<glu-checkbox leftLabel="Accept Terms" value="unchecked"></glu-checkbox>

React

Result

Loading...

Live Editor

<GluCheckbox leftLabel="Accept Terms" value="unchecked" />

Vue

<glu-checkbox leftLabel="Accept Terms" value="unchecked"></glu-checkbox>

<script setup>
import { GluCheckbox } from '@gelato-ui/vue';
</script>

Angular

<glu-checkbox leftLabel="Accept Terms" value="unchecked"></glu-checkbox>

import { Component } from '@angular/core';
import { GluCheckbox } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluCheckbox],
  template: `<glu-checkbox leftLabel="Accept Terms" value="unchecked"></glu-checkbox>`
})
export class MyComponent {}

---

Checkbox with Right Label

Display a checkbox with a right-aligned label.

HTML

Result

Loading...

Live Editor

<glu-checkbox rightLabel="I Agree" value="unchecked"></glu-checkbox>

React

Result

Loading...

Live Editor

<GluCheckbox rightLabel="I Agree" value="unchecked" />

Vue

<glu-checkbox rightLabel="I Agree" value="unchecked"></glu-checkbox>

<script setup>
import { GluCheckbox } from '@gelato-ui/vue';
</script>

Angular

<glu-checkbox rightLabel="I Agree" value="unchecked"></glu-checkbox>

import { Component } from '@angular/core';
import { GluCheckbox } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluCheckbox],
  template: `<glu-checkbox rightLabel="I Agree" value="unchecked"></glu-checkbox>`
})
export class MyComponent {}

---

Checkbox with Both Left and Right Labels

Combine left and right labels for additional context.

HTML

Result

Loading...

Live Editor

<glu-checkbox leftLabel="Accept" rightLabel="Terms & Conditions" value="unchecked"></glu-checkbox>

React

Result

Loading...

Live Editor

<GluCheckbox leftLabel="Accept" rightLabel="Terms & Conditions" value="unchecked" />

Vue

<glu-checkbox leftLabel="Accept" rightLabel="Terms & Conditions" value="unchecked"></glu-checkbox>

<script setup>
import { GluCheckbox } from '@gelato-ui/vue';
</script>

Angular

<glu-checkbox leftLabel="Accept" rightLabel="Terms & Conditions" value="unchecked"></glu-checkbox>

import { Component } from '@angular/core';
import { GluCheckbox } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluCheckbox],
  template: `<glu-checkbox leftLabel="Accept" rightLabel="Terms & Conditions" value="unchecked"></glu-checkbox>`
})
export class MyComponent {}

---

Checkbox with Error and Helper Text

Display an error message with helper text when validation fails.

HTML

Result

Loading...

Live Editor

<glu-checkbox
  leftLabel="Subscribe"
  error="This field is required"
  helperText="Please check the box to subscribe"
  helperIcon="error-icon"
  value="unchecked"
></glu-checkbox>

React

Result

Loading...

Live Editor

<GluCheckbox
  leftLabel="Subscribe"
  error="This field is required"
  helperText="Please check the box to subscribe"
  helperIcon="error-icon"
  value="unchecked"
/>

Vue

<glu-checkbox
  leftLabel="Subscribe"
  error="This field is required"
  helperText="Please check the box to subscribe"
  helperIcon="error-icon"
  value="unchecked"
></glu-checkbox>

<script setup>
import { GluCheckbox } from '@gelato-ui/vue';
</script>

Angular

<glu-checkbox
  leftLabel="Subscribe"
  error="This field is required"
  helperText="Please check the box to subscribe"
  helperIcon="error-icon"
  value="unchecked"
></glu-checkbox>

import { Component } from '@angular/core';
import { GluCheckbox } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluCheckbox],
  template: `
    <glu-checkbox
      leftLabel="Subscribe"
      error="This field is required"
      helperText="Please check the box to subscribe"
      helperIcon="error-icon"
      value="unchecked"
    ></glu-checkbox>
  `
})
export class MyComponent {}

---

Checkbox with Indeterminate State

When the hasIndeterminate property is enabled, the checkbox can toggle through an indeterminate state.

HTML

Result

Loading...

Live Editor

<glu-checkbox
  leftLabel="Select All"
  hasIndeterminate
  value="indeterminate"
></glu-checkbox>

React

Result

Loading...

Live Editor

<GluCheckbox
  leftLabel="Select All"
  hasIndeterminate
  value="indeterminate"
/>

Vue

<glu-checkbox
  leftLabel="Select All"
  hasIndeterminate
  value="indeterminate"
></glu-checkbox>

<script setup>
import { GluCheckbox } from '@gelato-ui/vue';
</script>

Angular

<glu-checkbox
  leftLabel="Select All"
  hasIndeterminate
  value="indeterminate"
></glu-checkbox>

import { Component } from '@angular/core';
import { GluCheckbox } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluCheckbox],
  template: `<glu-checkbox leftLabel="Select All" hasIndeterminate value="indeterminate"></glu-checkbox>`
})
export class MyComponent {}

---

Disabled Checkbox

Prevent user interaction by disabling the checkbox.

HTML

Result

Loading...

Live Editor

<glu-checkbox
  leftLabel="I Agree"
  disabled
  value="unchecked"
></glu-checkbox>

React

Result

Loading...

Live Editor

<GluCheckbox
  leftLabel="I Agree"
  disabled
  value="unchecked"
/>

Vue

<glu-checkbox
  leftLabel="I Agree"
  disabled
  value="unchecked"
></glu-checkbox>

<script setup>
import { GluCheckbox } from '@gelato-ui/vue';
</script>

Angular

<glu-checkbox
  leftLabel="I Agree"
  disabled
  value="unchecked"
></glu-checkbox>

import { Component } from '@angular/core';
import { GluCheckbox } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluCheckbox],
  template: `<glu-checkbox leftLabel="I Agree" disabled value="unchecked"></glu-checkbox>`
})
export class MyComponent {}

---

Properties

Property	Attribute	Description	Type	Default
disabled	disabled	Disables the checkbox, preventing user interaction.	boolean	false
error	error	The error message to display. When non-empty, the component enters an error state.	string	undefined
hasIndeterminate	has-indeterminate	Specifies whether the checkbox has an indeterminate state. If false (default), the checkbox toggles only between "unchecked" and "checked".	boolean	false
helperIcon	helper-icon	The name of the helper icon displayed alongside the helper text. If an error exists, a default error icon is shown instead.	string	undefined
helperIconVariant	helper-icon-variant	Specifies the visual variant for the helper icon. Allowed values: 'solid' or 'outline'.	"outline" | "solid"	'outline'
helperText	helper-text	Supplemental helper text displayed below the input.	string	undefined
leftLabel	left-label	Optional left label text displayed adjacent to the checkbox. Rendered using the glu-label component.	string	undefined
rightLabel	right-label	Optional right label text displayed adjacent to the checkbox. Rendered using the glu-label component.	string	undefined
value	value	The current value (state) of the checkbox. Supported values: - 'unchecked' - 'checked' - 'indeterminate' This property is mutable to support two-way binding.	"checked" | "indeterminate" | "unchecked"	'unchecked'

Events

Event	Description	Type
glChange	Emitted when the checkbox value changes.	CustomEvent<{ value: "checked" | "unchecked" | "indeterminate"; event: Event; }>

Dependencies

Depends on

• glu-label
• glu-icon
• glu-helper-text

Graph

---

Built with StencilJS