Getting Started
Components
Accordion Alert Alert Dialog Aspect Ratio Avatar Badge Breadcrumb Button Calendar Card Carousel Chart Checkbox Checkbox Group Collapsible Combobox Context Menu Date Picker Dialog Editor Hover Card Input Input OTP Label Menu Menu Bar Pagination Popover Progress Radio Group reCAPTCHA Select Separator Sheet Skeleton Slider Switch Table Tabs Textarea Toast Toggle Toggle Group Tooltip
Checkbox
A control that allows the user to toggle between checked and not checked.
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { ScCheckbox, ScLabel } from '@semantic-components/ui';
@Component({
selector: 'app-checkbox-demo',
imports: [ScCheckbox, ScLabel],
template: `
<div class="flex items-center space-x-2">
<input id="terms" sc-checkbox />
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="terms"
sc-label
>
Accept terms and conditions
</label>
</div>
`,
styles: ``,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CheckboxDemo {}
Examples
With text
You agree to our Terms of Service and Privacy Policy.
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { ScCheckbox } from '@semantic-components/ui';
@Component({
selector: 'app-checkbox-with-text',
imports: [ScCheckbox],
template: `
<div class="items-top flex space-x-2">
<input id="terms1" sc-checkbox />
<div class="grid gap-1.5 leading-none">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="terms1"
>
Accept terms and conditions
</label>
<p class="text-sm text-muted-foreground">
You agree to our Terms of Service and Privacy Policy.
</p>
</div>
</div>
`,
styles: ``,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CheckboxWithText {}
Disabled State
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { ScCheckbox } from '@semantic-components/ui';
@Component({
selector: 'app-checkbox-disabled',
imports: [ScCheckbox],
template: `
<div class="flex items-center space-x-2">
<input id="terms2" sc-checkbox disabled />
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="terms2"
>
Accept terms and conditions
</label>
</div>
`,
styles: ``,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CheckboxDisabled {}
Indeterminate State
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { ScCheckbox } from '@semantic-components/ui';
@Component({
selector: 'app-checkbox-disabled',
imports: [ScCheckbox],
template: `
<div class="flex items-center space-x-2">
<input id="terms2" sc-checkbox disabled />
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="terms2"
>
Accept terms and conditions
</label>
</div>
`,
styles: ``,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CheckboxDisabled {}