Radio Group

import { Component, signal } from '@angular/core';
import { NdIcon } from '@ndop/core';
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from '@/ui/form-field/form-field';
import {
  RadioGroup,
  RadioGroupIndicator,
  RadioGroupItem,
} from '@/ui/radio-group/radio-group';

/**
 * Plans as selectable cards: each card is the label of its radio, so
 * clicking anywhere on it chooses the plan, and the chosen card is
 * highlighted.
 */
@Component({
  selector: 'example-radio-group-cards',
  imports: [
    Field,
    FieldContent,
    FieldDescription,
    FieldLabel,
    FieldTitle,
    NdIcon,
    RadioGroup,
    RadioGroupIndicator,
    RadioGroupItem,
  ],
  template: `
    <div
      ndRadioGroup
      aria-label="Plan"
      class="w-full max-w-sm"
      [(value)]="plan"
    >
      @for (option of plans; track option.value) {
        <label ndFieldLabel [for]="'radio-group-cards-' + option.value">
          <div ndField orientation="horizontal">
            <div ndFieldContent>
              <div ndFieldTitle>{{ option.title }}</div>
              <p ndFieldDescription>{{ option.description }}</p>
            </div>
            <button
              ndRadioGroupItem
              [value]="option.value"
              [id]="'radio-group-cards-' + option.value"
              [attr.aria-label]="option.title"
            >
              <span ndRadioGroupIndicator><svg ndIcon="circle"></svg></span>
            </button>
          </div>
        </label>
      }
    </div>
  `,
})
export class RadioGroupCardsExample {
  protected readonly plans = [
    {
      value: 'starter',
      title: 'Starter',
      description: 'For side projects: one seat, 5 GB of storage.',
    },
    {
      value: 'pro',
      title: 'Pro',
      description: 'For small teams: ten seats, 100 GB of storage.',
    },
    {
      value: 'business',
      title: 'Business',
      description: 'Unlimited seats, single sign-on and audit logs.',
    },
  ];

  protected readonly plan = signal<string | null>('pro');
}

import { Component } from '@angular/core';
import { NdIcon } from '@ndop/core';
import { Label } from '@/ui/label/label';
import {
  RadioGroup,
  RadioGroupIndicator,
  RadioGroupItem,
} from '@/ui/radio-group/radio-group';

/**
 * A group with one option that can't be chosen; the arrow keys skip it.
 */
@Component({
  selector: 'example-radio-group-disabled',
  imports: [Label, NdIcon, RadioGroup, RadioGroupIndicator, RadioGroupItem],
  template: `
    <div ndRadioGroup aria-label="Delivery" defaultValue="standard">
      @for (option of options; track option.value) {
        <div class="flex items-center gap-3">
          <button
            ndRadioGroupItem
            [value]="option.value"
            [id]="'radio-group-disabled-' + option.value"
            [disabled]="option.disabled"
          >
            <span ndRadioGroupIndicator><svg ndIcon="circle"></svg></span>
          </button>
          <label
            ndLabel
            [for]="'radio-group-disabled-' + option.value"
            class="data-disabled:opacity-50"
          >
            {{ option.label }}
          </label>
        </div>
      }
    </div>
  `,
})
export class RadioGroupDisabledExample {
  protected readonly options = [
    { value: 'standard', label: 'Standard, 3–5 days', disabled: false },
    { value: 'express', label: 'Express, next day', disabled: false },
    { value: 'same-day', label: 'Same day (unavailable)', disabled: true },
  ];
}

import { Component, signal } from '@angular/core';
import { form, FormField, required } from '@angular/forms/signals';
import { NdIcon } from '@ndop/core';
import { Button } from '@/ui/button/button';
import {
  Field,
  FieldError,
  FieldLegend,
  FieldSet,
} from '@/ui/form-field/form-field';
import { Label } from '@/ui/label/label';
import {
  RadioGroup,
  RadioGroupIndicator,
  RadioGroupItem,
} from '@/ui/radio-group/radio-group';

/**
 * A required choice in a Signal Forms form. Submitting without one shows
 * the error and announces it.
 */
@Component({
  selector: 'example-radio-group-form',
  imports: [
    Button,
    Field,
    FieldError,
    FieldLegend,
    FieldSet,
    FormField,
    Label,
    NdIcon,
    RadioGroup,
    RadioGroupIndicator,
    RadioGroupItem,
  ],
  template: `
    <form class="flex flex-col gap-6" (submit)="submit($event)">
      <fieldset ndFieldSet>
        <legend ndFieldLegend variant="label" id="radio-group-form-legend">
          Notify me about
        </legend>
        <div ndField>
          <div
            ndRadioGroup
            aria-labelledby="radio-group-form-legend"
            [formField]="preferences.notify"
          >
            @for (option of options; track option.value) {
              <div class="flex items-center gap-3">
                <button
                  ndRadioGroupItem
                  [value]="option.value"
                  [id]="'radio-group-form-' + option.value"
                >
                  <span ndRadioGroupIndicator>
                    <svg ndIcon="circle"></svg>
                  </span>
                </button>
                <label ndLabel [for]="'radio-group-form-' + option.value">
                  {{ option.label }}
                </label>
              </div>
            }
          </div>
          <p ndFieldError>Choose what to be notified about.</p>
        </div>
      </fieldset>
      <button ndButton type="submit" class="self-start">Save</button>
    </form>
  `,
})
export class RadioGroupFormExample {
  protected readonly options = [
    { value: 'all', label: 'All new messages' },
    { value: 'mentions', label: 'Direct messages and mentions' },
    { value: 'none', label: 'Nothing' },
  ];

  protected readonly model = signal<{ notify: string | null }>({
    notify: null,
  });

  protected readonly preferences = form(this.model, (path) => {
    required(path.notify);
  });

  /**
   * Marks the fields touched, so errors show, instead of reloading.
   *
   * @param event - The form's submit event.
   */
  protected submit(event: Event): void {
    event.preventDefault();
    this.preferences().markAsTouched();
  }
}