Run the CLI
Use the CLI to add the component to your project.
npx @ngzard/ui@latest add segmentedSegmented Control
A set of two or more segments, each of which functions as a mutually exclusive button. Based on shadcn/ui's Tabs component pattern, providing a clean way to create toggle controls with single selection.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ZardSegmentedComponent } from '../segmented.component';
@Component({
selector: 'zard-demo-segmented-default',
imports: [ZardSegmentedComponent],
standalone: true,
template: ` <z-segmented [zOptions]="options" zDefaultValue="all" (zChange)="onSelectionChange($event)" /> `,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSegmentedDefaultComponent {
options = [
{ value: 'all', label: 'All' },
{ value: 'unread', label: 'Unread' },
{ value: 'archived', label: 'Archived' },
];
onSelectionChange(value: string) {
console.log('Selected:', value);
}
}
Installation
Add the component files
Create the component directory structure and add the following files to your project.
Examples
default
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ZardSegmentedComponent } from '../segmented.component';
@Component({
selector: 'zard-demo-segmented-default',
imports: [ZardSegmentedComponent],
standalone: true,
template: ` <z-segmented [zOptions]="options" zDefaultValue="all" (zChange)="onSelectionChange($event)" /> `,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSegmentedDefaultComponent {
options = [
{ value: 'all', label: 'All' },
{ value: 'unread', label: 'Unread' },
{ value: 'archived', label: 'Archived' },
];
onSelectionChange(value: string) {
console.log('Selected:', value);
}
}
sizes
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ZardSegmentedComponent } from '../segmented.component';
@Component({
selector: 'zard-demo-segmented-sizes',
imports: [ZardSegmentedComponent],
standalone: true,
template: `
<div class="space-y-4">
<div>
<label class="mb-2 block text-sm font-medium">Small</label>
<z-segmented zSize="sm" [zOptions]="options" zDefaultValue="tab1" />
</div>
<div>
<label class="mb-2 block text-sm font-medium">Default</label>
<z-segmented [zOptions]="options" zDefaultValue="tab1" />
</div>
<div>
<label class="mb-2 block text-sm font-medium">Large</label>
<z-segmented zSize="lg" [zOptions]="options" zDefaultValue="tab1" />
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSegmentedSizesComponent {
options = [
{ value: 'tab1', label: 'Tab 1' },
{ value: 'tab2', label: 'Tab 2' },
{ value: 'tab3', label: 'Tab 3' },
];
}
disabled
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ZardSegmentedComponent } from '../segmented.component';
@Component({
selector: 'zard-demo-segmented-disabled',
imports: [ZardSegmentedComponent],
standalone: true,
template: `
<div class="space-y-4">
<div>
<label class="mb-2 block text-sm font-medium">With disabled options</label>
<z-segmented [zOptions]="optionsWithDisabled" zDefaultValue="enabled1" />
</div>
<div>
<label class="mb-2 block text-sm font-medium">Entire component disabled</label>
<z-segmented [zOptions]="options" zDefaultValue="tab1" [zDisabled]="true" />
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSegmentedDisabledComponent {
options = [
{ value: 'tab1', label: 'Tab 1' },
{ value: 'tab2', label: 'Tab 2' },
{ value: 'tab3', label: 'Tab 3' },
];
optionsWithDisabled = [
{ value: 'enabled1', label: 'Enabled' },
{ value: 'disabled1', label: 'Disabled', disabled: true },
{ value: 'enabled2', label: 'Enabled' },
{ value: 'disabled2', label: 'Disabled', disabled: true },
];
}