Checkbox

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-ember/checkbox
Copy

Usage#

Copyimport { Checkbox } from '@/ember-ui/checkbox';

Copy<Checkbox />

Checked State#

Use @checked to set the initial state, or handle @onCheckedChange to control it reactively.

Copyimport Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { Checkbox } from '@/ember-ui/checkbox';
 
export default class Example extends Component {
  @tracked checked = false;
 
  handleCheckedChange = (value: boolean) => {
    this.checked = value;
  };
 
  <template>
    <Checkbox @checked={{this.checked}} @onCheckedChange={{this.handleCheckedChange}} />
  </template>
}

Invalid State#

Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.

Examples#

Basic#

Pair the checkbox with Field and FieldLabel for proper layout and labeling.

Description#

Use FieldContent and FieldDescription for helper text.

Disabled#

Use @disabled={{true}} to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.

Group#

Use multiple fields to create a checkbox list.

Table#

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

See the Radix UI documentation for more information.