Segmented

import { Component } from '@angular/core';
import { WrSegmented } from 'ngwr/segmented';

@Component({ imports: [WrSegmented] })
export class MyComponent {}

import { Component, signal } from '@angular/core';
import { FormField, form, required } from '@angular/forms/signals';
import { WrFormField } from 'ngwr/form';
import { WrSegmented, type WrSegmentedOption } from 'ngwr/segmented';

@Component({
  selector: 'app-schedule',
  imports: [FormField, WrFormField, WrSegmented],
  template: `
    <wr-form-field label="Range">
      <wr-segmented [options]="ranges" [formField]="schedule.range" />
    </wr-form-field>
  `,
})
export class ScheduleComponent {
  protected readonly ranges: readonly WrSegmentedOption<string>[] = [
    { value: 'day', label: 'Day' },
    { value: 'week', label: 'Week' },
    { value: 'month', label: 'Month' },
  ];

  private readonly model = signal({ range: '' });
  protected readonly schedule = form(this.model, path => {
    required(path.range, { message: 'Pick a range.' });
  });
}

interface WrSegmentedOption<T = unknown> {
  value: T;
  label?: string;
  icon?: WrIconName;
  disabled?: boolean;
  /** Accessible name for an icon-only segment, which has no text to read. */
  ariaLabel?: string;
}