Radio Group

import {RadioGroup, RadioGroupItem, Label} from '@stroeer-labs/design-library/react';

export function RadioGroupDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p id="spacing-label" className="text-xs font-medium text-muted-foreground">
                    Spacing
                </p>
                <RadioGroup defaultValue="comfortable" aria-labelledby="spacing-label">
                    <div className="flex items-center gap-3">
                        <RadioGroupItem value="default" id="r1" />
                        <Label htmlFor="r1">Default</Label>
                    </div>
                    <div className="flex items-center gap-3">
                        <RadioGroupItem value="comfortable" id="r2" />
                        <Label htmlFor="r2">Comfortable</Label>
                    </div>
                    <div className="flex items-center gap-3">
                        <RadioGroupItem value="compact" id="r3" />
                        <Label htmlFor="r3">Compact</Label>
                    </div>
                </RadioGroup>
            </div>
            <div className="space-y-2">
                <p id="disabled-label" className="text-xs font-medium text-muted-foreground">
                    Disabled
                </p>
                <RadioGroup defaultValue="on" aria-labelledby="disabled-label">
                    <div className="flex items-center gap-3">
                        <RadioGroupItem value="on" id="rd1" disabled />
                        <Label htmlFor="rd1">Selected &amp; disabled</Label>
                    </div>
                    <div className="flex items-center gap-3">
                        <RadioGroupItem value="off" id="rd2" disabled />
                        <Label htmlFor="rd2">Disabled</Label>
                    </div>
                </RadioGroup>
            </div>
        </div>
    );
}

import '@angular/compiler';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HlmRadioGroupImports, HlmLabelImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-radio-group-demo',
    standalone: true,
    imports: [FormsModule, HlmRadioGroupImports, HlmLabelImports],
    template: `
    <div class="space-y-6">
      <!-- ids are namespaced (ng-*) so they never collide with the React demo's r1/r2… on the same
           sandbox page; duplicate ids would make <label for> resolve to the wrong column's control. -->
      <div class="space-y-2">
        <label hlmLabel id="ng-spacing-label" class="text-xs font-medium text-muted-foreground">Spacing</label>
        <!-- Two-way bound so clicks move the selection, mirroring the React demo's uncontrolled default. -->
        <hlm-radio-group [(ngModel)]="spacing" aria-labelledby="ng-spacing-label">
          <div class="flex items-center gap-3">
            <hlm-radio value="default" inputId="ng-r1"><hlm-radio-indicator indicator /></hlm-radio>
            <label hlmLabel for="ng-r1">Default</label>
          </div>
          <div class="flex items-center gap-3">
            <hlm-radio value="comfortable" inputId="ng-r2"><hlm-radio-indicator indicator /></hlm-radio>
            <label hlmLabel for="ng-r2">Comfortable</label>
          </div>
          <div class="flex items-center gap-3">
            <hlm-radio value="compact" inputId="ng-r3"><hlm-radio-indicator indicator /></hlm-radio>
            <label hlmLabel for="ng-r3">Compact</label>
          </div>
        </hlm-radio-group>
      </div>
      <div class="space-y-2">
        <label hlmLabel id="ng-disabled-label" class="text-xs font-medium text-muted-foreground">Disabled</label>
        <hlm-radio-group [(ngModel)]="enabled" aria-labelledby="ng-disabled-label">
          <div class="flex items-center gap-3">
            <hlm-radio value="on" inputId="ng-rd1" disabled><hlm-radio-indicator indicator /></hlm-radio>
            <label hlmLabel for="ng-rd1">Selected &amp; disabled</label>
          </div>
          <div class="flex items-center gap-3">
            <hlm-radio value="off" inputId="ng-rd2" disabled><hlm-radio-indicator indicator /></hlm-radio>
            <label hlmLabel for="ng-rd2">Disabled</label>
          </div>
        </hlm-radio-group>
      </div>
    </div>
  `,
})
export class RadioGroupDemoComponent {
    protected spacing = 'comfortable';
    protected enabled = 'on';
}