[CL-50] Form controls (checkbox and radio) (#4066)

* [CL-50] feat: scaffold checkbox component

* [CL-50] feat: implement control value accessor for checbox

* [CL-50] feat: add form-field support to checkbox

* [CL-50] feat: implement non-selected checkbox styling

* [CL-50] feat: implement checkbox checked styles

* [CL-50] feat: improve checkbox form-field compat

* [CL-50] fix: checkbox border hover wrong color

* [CL-50] feat: use svg instead of bwi font

* [CL-50] feat: scaffold radio button

* [EC-50] feat: implement radio logic

* [CL-50] feat: add radio group tests

* [CL-50] feat: add radio-button tests

* [CL-50] feat: implement radio button styles

* [CL-50] fix: checkbox style tweaks

* [CL-50] feat: smooth radio button selection transition

* [CL-50] chore: various fixes and cleanups

* [CL-50] feat: add form field support

* [EC-50] feat-wip: simplify checkbox styling

* [EC-50] feat: extract checkbox into separate component

* [CL-50] feat: add standalone form control component

* [CL-50] feat: remove unnecessary checkbox-control
It wasn't really doing anything, might as well use form control directly

* [CL-50] chore: create separate folder with form examples

* [CL-50] feat: switch to common bit-label

* [CL-50] feat: let radio group act as form control

* [CL-50] chore: restore form-field component

* [CL-50] feat: add support for hint and error

* [CL-50] fix: storybook build issue

* [CL-50] fix: radio group label wrong text color

* [CL-50] fix: translation

* [CL-50] fix: put hint and errors outside label

* [CL-50] feat:

* [CL-50] feat: add custom checkbox example story

* [CL-50] chore: remove 1 from full example name

* [CL-50] chore: clean up unused icon

* [CL-50] chore: clean up unused tailwind plugin

* [CL-50] fix: ring offset color in custom example

* [CL-50] chore: clean up unused icon

* [CL-50] chore: add design link

* [CL-50] chore: remove unused import

* [CL-50] fix: pr review comments

* [CL-50] fix: improve id handling

libs/components/src/checkbox/checkbox.component.ts

@@ -0,0 +1,104 @@
+import { Component, HostBinding, Input, Optional, Self } from "@angular/core";
+import { NgControl, Validators } from "@angular/forms";
+
+import { BitFormControlAbstraction } from "../form-control";
+
+@Component({
+  selector: "input[type=checkbox][bitCheckbox]",
+  template: "",
+  providers: [{ provide: BitFormControlAbstraction, useExisting: CheckboxComponent }],
+  styles: [
+    `
+      :host:checked:before {
+        -webkit-mask-image: url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E');
+        mask-image: url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E');
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+      }
+    `,
+  ],
+})
+export class CheckboxComponent implements BitFormControlAbstraction {
+  @HostBinding("class")
+  protected inputClasses = [
+    "tw-appearance-none",
+    "tw-outline-none",
+    "tw-relative",
+    "tw-transition",
+    "tw-cursor-pointer",
+    "tw-inline-block",
+    "tw-rounded",
+    "tw-border",
+    "tw-border-solid",
+    "tw-border-secondary-500",
+    "tw-h-3.5",
+    "tw-w-3.5",
+    "tw-mr-1.5",
+    "tw-bottom-[-1px]", // Fix checkbox looking off-center
+
+    "before:tw-content-['']",
+    "before:tw-block",
+    "before:tw-absolute",
+    "before:tw-inset-0",
+
+    "hover:tw-border-2",
+    "[&>label]:tw-border-2",
+
+    "focus-visible:tw-ring-2",
+    "focus-visible:tw-ring-offset-2",
+    "focus-visible:tw-ring-primary-700",
+
+    "disabled:tw-cursor-auto",
+    "disabled:tw-border",
+    "disabled:tw-bg-secondary-100",
+
+    "checked:tw-bg-primary-500",
+    "checked:tw-border-primary-500",
+
+    "checked:hover:tw-bg-primary-700",
+    "checked:hover:tw-border-primary-700",
+    "[&>label:hover]:checked:tw-bg-primary-700",
+    "[&>label:hover]:checked:tw-border-primary-700",
+
+    "checked:before:tw-bg-text-contrast",
+
+    "checked:disabled:tw-border-secondary-100",
+    "checked:disabled:tw-bg-secondary-100",
+
+    "checked:disabled:before:tw-bg-text-muted",
+  ];
+
+  constructor(@Optional() @Self() private ngControl?: NgControl) {}
+
+  @HostBinding()
+  @Input()
+  get disabled() {
+    return this._disabled ?? this.ngControl?.disabled ?? false;
+  }
+  set disabled(value: any) {
+    this._disabled = value != null && value !== false;
+  }
+  private _disabled: boolean;
+
+  @Input()
+  get required() {
+    return (
+      this._required ?? this.ngControl?.control?.hasValidator(Validators.requiredTrue) ?? false
+    );
+  }
+  set required(value: any) {
+    this._required = value != null && value !== false;
+  }
+  private _required: boolean;
+
+  get hasError() {
+    return this.ngControl?.status === "INVALID" && this.ngControl?.touched;
+  }
+
+  get error(): [string, any] {
+    const key = Object.keys(this.ngControl.errors)[0];
+    return [key, this.ngControl.errors[key]];
+  }
+}

libs/components/src/checkbox/checkbox.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { FormControlModule } from "../form-control";
+import { SharedModule } from "../shared";
+
+import { CheckboxComponent } from "./checkbox.component";
+
+@NgModule({
+  imports: [SharedModule, CommonModule, FormControlModule],
+  declarations: [CheckboxComponent],
+  exports: [CheckboxComponent],
+})
+export class CheckboxModule {}

libs/components/src/checkbox/checkbox.stories.ts

@@ -0,0 +1,104 @@
+import { Component, Input } from "@angular/core";
+import { FormsModule, ReactiveFormsModule, FormBuilder, Validators } from "@angular/forms";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/src/abstractions/i18n.service";
+
+import { FormControlModule } from "../form-control";
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { CheckboxModule } from "./checkbox.module";
+
+const template = `
+  <form [formGroup]="formObj">
+    <bit-form-control>
+      <input type="checkbox" bitCheckbox formControlName="checkbox">
+      <bit-label>Click me</bit-label>
+    </bit-form-control>
+  </form>`;
+
+@Component({
+  selector: "app-example",
+  template,
+})
+class ExampleComponent {
+  protected formObj = this.formBuilder.group({
+    checkbox: [false, Validators.requiredTrue],
+  });
+
+  @Input() set checked(value: boolean) {
+    this.formObj.patchValue({ checkbox: value });
+  }
+
+  @Input() set disabled(disable: boolean) {
+    if (disable) {
+      this.formObj.disable();
+    } else {
+      this.formObj.enable();
+    }
+  }
+
+  constructor(private formBuilder: FormBuilder) {}
+}
+
+export default {
+  title: "Component Library/Form/Checkbox",
+  component: ExampleComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [ExampleComponent],
+      imports: [FormsModule, ReactiveFormsModule, FormControlModule, CheckboxModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              required: "required",
+              inputRequired: "Input is required.",
+              inputEmail: "Input is not an email-address.",
+            });
+          },
+        },
+      ],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=3930%3A16850&t=xXPx6GJYsJfuMQPE-4",
+    },
+  },
+  args: {
+    checked: false,
+    disabled: false,
+  },
+} as Meta;
+
+const DefaultTemplate: Story<ExampleComponent> = (args: ExampleComponent) => ({
+  props: args,
+  template: `<app-example [checked]="checked" [disabled]="disabled"></app-example>`,
+});
+
+export const Default = DefaultTemplate.bind({});
+
+const CustomTemplate: Story = (args) => ({
+  props: args,
+  template: `
+    <div class="tw-flex tw-flex-col tw-w-32">
+      <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2 tw-items-baseline">
+        A-Z
+        <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox>
+      </label>
+      <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2 tw-items-baseline">
+        a-z
+        <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox>
+      </label>
+      <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2 tw-items-baseline">
+        0-9
+        <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox>
+      </label>
+    </div>
+  `,
+});
+
+export const Custom = CustomTemplate.bind({});

libs/components/src/checkbox/index.ts

@@ -0,0 +1 @@
+export * from "./checkbox.module";

libs/components/src/form-control/form-control.abstraction.ts

@@ -0,0 +1,6 @@
+export abstract class BitFormControlAbstraction {
+  disabled: boolean;
+  required: boolean;
+  hasError: boolean;
+  error: [string, any];
+}

libs/components/src/form-control/form-control.component.html

@@ -0,0 +1,13 @@
+<label [class]="labelClasses">
+  <ng-content></ng-content>
+  <span [class]="labelContentClasses">
+    <ng-content select="bit-label"></ng-content>
+    <span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
+  </span>
+</label>
+<div>
+  <ng-content select="bit-hint" *ngIf="!hasError"></ng-content>
+</div>
+<div *ngIf="hasError" class="tw-mt-1 tw-text-danger">
+  <i class="bwi bwi-error"></i> {{ displayError }}
+</div>

libs/components/src/form-control/form-control.component.ts

@@ -0,0 +1,68 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { Component, ContentChild, HostBinding, Input } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { BitFormControlAbstraction } from "./form-control.abstraction";
+
+@Component({
+  selector: "bit-form-control",
+  templateUrl: "form-control.component.html",
+})
+export class FormControlComponent {
+  @Input() label: string;
+
+  private _inline: boolean;
+  @Input() get inline() {
+    return this._inline;
+  }
+  set inline(value: boolean | string | null) {
+    this._inline = coerceBooleanProperty(value);
+  }
+
+  @ContentChild(BitFormControlAbstraction) protected formControl: BitFormControlAbstraction;
+
+  @HostBinding("class") get classes() {
+    return ["tw-mb-6"].concat(this.inline ? ["tw-inline-block", "tw-mr-4"] : ["tw-block"]);
+  }
+
+  constructor(private i18nService: I18nService) {}
+
+  protected get labelClasses() {
+    return ["tw-transition", "tw-select-none", "tw-mb-0"].concat(
+      this.formControl.disabled ? "tw-cursor-auto" : "tw-cursor-pointer"
+    );
+  }
+
+  protected get labelContentClasses() {
+    return ["tw-font-semibold"].concat(
+      this.formControl.disabled ? "tw-text-muted" : "tw-text-main"
+    );
+  }
+
+  get required() {
+    return this.formControl.required;
+  }
+
+  get hasError() {
+    return this.formControl.hasError;
+  }
+
+  get error() {
+    return this.formControl.error;
+  }
+
+  get displayError() {
+    switch (this.error[0]) {
+      case "required":
+        return this.i18nService.t("inputRequired");
+      default:
+        // Attempt to show a custom error message.
+        if (this.error[1]?.message) {
+          return this.error[1]?.message;
+        }
+
+        return this.error;
+    }
+  }
+}

libs/components/src/form-control/form-control.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../shared";
+
+import { FormControlComponent } from "./form-control.component";
+import { BitHintComponent } from "./hint.component";
+import { BitLabel } from "./label.directive";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [FormControlComponent, BitLabel, BitHintComponent],
+  exports: [FormControlComponent, BitLabel, BitHintComponent],
+})
+export class FormControlModule {}

libs/components/src/form-control/index.ts

@@ -0,0 +1,3 @@
+export * from "./form-control.module";
+export * from "./form-control.abstraction";
+export * from "./form-control.component";

libs/components/src/form-field/form-field.component.ts

@@ -7,9 +7,10 @@ import {
   ViewChild,
 } from "@angular/core";
 
+import { BitHintComponent } from "../form-control/hint.component";
+
 import { BitErrorComponent } from "./error.component";
 import { BitFormFieldControl } from "./form-field-control";
-import { BitHintComponent } from "./hint.component";
 import { BitPrefixDirective } from "./prefix.directive";
 import { BitSuffixDirective } from "./suffix.directive";
 

libs/components/src/form-field/form-field.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from "@angular/core";
 
+import { FormControlModule } from "../form-control";
 import { BitInputDirective } from "../input/input.directive";
 import { InputModule } from "../input/input.module";
 import { MultiSelectComponent } from "../multi-select/multi-select.component";
@@ -9,20 +10,16 @@ import { SharedModule } from "../shared";
 import { BitErrorSummary } from "./error-summary.component";
 import { BitErrorComponent } from "./error.component";
 import { BitFormFieldComponent } from "./form-field.component";
-import { BitHintComponent } from "./hint.component";
-import { BitLabel } from "./label.directive";
 import { BitPasswordInputToggleDirective } from "./password-input-toggle.directive";
 import { BitPrefixDirective } from "./prefix.directive";
 import { BitSuffixDirective } from "./suffix.directive";
 
 @NgModule({
-  imports: [SharedModule, InputModule, MultiSelectModule],
+  imports: [SharedModule, FormControlModule, InputModule, MultiSelectModule],
   declarations: [
     BitErrorComponent,
     BitErrorSummary,
     BitFormFieldComponent,
-    BitHintComponent,
-    BitLabel,
     BitPasswordInputToggleDirective,
     BitPrefixDirective,
     BitSuffixDirective,
@@ -31,13 +28,12 @@ import { BitSuffixDirective } from "./suffix.directive";
     BitErrorComponent,
     BitErrorSummary,
     BitFormFieldComponent,
-    BitHintComponent,
     BitInputDirective,
-    BitLabel,
     BitPasswordInputToggleDirective,
     BitPrefixDirective,
     BitSuffixDirective,
     MultiSelectComponent,
+    FormControlModule,
   ],
 })
 export class FormFieldModule {}

libs/components/src/form-field/form-field.stories.ts

@@ -12,7 +12,9 @@ import { Meta, moduleMetadata, Story } from "@storybook/angular";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
 import { ButtonModule } from "../button";
+import { CheckboxModule } from "../checkbox";
 import { InputModule } from "../input/input.module";
+import { RadioButtonModule } from "../radio-button";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { BitFormFieldComponent } from "./form-field.component";
@@ -23,7 +25,15 @@ export default {
   component: BitFormFieldComponent,
   decorators: [
     moduleMetadata({
-      imports: [FormsModule, ReactiveFormsModule, FormFieldModule, InputModule, ButtonModule],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        FormFieldModule,
+        InputModule,
+        ButtonModule,
+        CheckboxModule,
+        RadioButtonModule,
+      ],
       providers: [
         {
           provide: I18nService,
@@ -55,6 +65,8 @@ const formObj = fb.group({
 const defaultFormObj = fb.group({
   name: ["", [Validators.required]],
   email: ["", [Validators.required, Validators.email, forbiddenNameValidator(/bit/i)]],
+  terms: [false, [Validators.requiredTrue]],
+  updates: ["yes"],
 });
 
 // Custom error message, `message` is shown as the error message

libs/components/src/form/form.stories.ts

@@ -0,0 +1,111 @@
+import {
+  AbstractControl,
+  FormsModule,
+  ReactiveFormsModule,
+  ValidationErrors,
+  ValidatorFn,
+  Validators,
+  FormBuilder,
+} from "@angular/forms";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { ButtonModule } from "../button";
+import { CheckboxModule } from "../checkbox";
+import { FormControlModule } from "../form-control";
+import { FormFieldModule } from "../form-field";
+import { InputModule } from "../input/input.module";
+import { RadioButtonModule } from "../radio-button";
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+export default {
+  title: "Component Library/Form",
+  decorators: [
+    moduleMetadata({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        FormFieldModule,
+        InputModule,
+        ButtonModule,
+        FormControlModule,
+        CheckboxModule,
+        RadioButtonModule,
+      ],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              required: "required",
+              checkboxRequired: "Option is required",
+              inputRequired: "Input is required.",
+              inputEmail: "Input is not an email-address.",
+            });
+          },
+        },
+      ],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A17689",
+    },
+  },
+} as Meta;
+
+const fb = new FormBuilder();
+const exampleFormObj = fb.group({
+  name: ["", [Validators.required]],
+  email: ["", [Validators.required, Validators.email, forbiddenNameValidator(/bit/i)]],
+  terms: [false, [Validators.requiredTrue]],
+  updates: ["yes"],
+});
+
+// Custom error message, `message` is shown as the error message
+function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const forbidden = nameRe.test(control.value);
+    return forbidden ? { forbiddenName: { message: "forbiddenName" } } : null;
+  };
+}
+
+const FullExampleTemplate: Story = (args) => ({
+  props: {
+    formObj: exampleFormObj,
+    submit: () => exampleFormObj.markAllAsTouched(),
+    ...args,
+  },
+  template: `
+    <form [formGroup]="formObj" (ngSubmit)="submit()">
+      <bit-form-field>
+        <bit-label>Name</bit-label>
+        <input bitInput formControlName="name" />
+      </bit-form-field>
+
+      <bit-form-field>
+        <bit-label>Email</bit-label>
+        <input bitInput formControlName="email" />
+      </bit-form-field>
+
+      <bit-form-control>
+        <bit-label>Agree to terms</bit-label>
+        <input type="checkbox" bitCheckbox formControlName="terms">
+        <bit-hint>Required for the service to work properly</bit-hint>
+      </bit-form-control>
+
+      <bit-radio-group formControlName="updates">
+        <bit-label>Subscribe to updates?</bit-label>
+        <bit-radio-button value="yes">Yes</bit-radio-button>
+        <bit-radio-button value="no">No</bit-radio-button>
+        <bit-radio-button value="later">Decide later</bit-radio-button>
+      </bit-radio-group>
+
+      <button type="submit" bitButton buttonType="primary">Submit</button>
+    </form>
+  `,
+});
+
+export const FullExample = FullExampleTemplate.bind({});

libs/components/src/index.ts

@@ -4,6 +4,7 @@ export * from "./badge";
 export * from "./banner";
 export * from "./button";
 export * from "./callout";
+export * from "./checkbox";
 export * from "./dialog";
 export * from "./form-field";
 export * from "./icon-button";

libs/components/src/radio-button/index.ts

@@ -0,0 +1,3 @@
+export * from "./radio-button.module";
+export * from "./radio-button.component";
+export * from "./radio-group.component";

libs/components/src/radio-button/radio-button.component.html

@@ -0,0 +1,14 @@
+<bit-form-control inline>
+  <input
+    type="radio"
+    bitRadio
+    [id]="inputId"
+    [name]="name"
+    [disabled]="disabled"
+    [value]="value"
+    [checked]="selected"
+    (change)="onInputChange()"
+    (blur)="onBlur()"
+  />
+  <bit-label><ng-content></ng-content></bit-label>
+</bit-form-control>

libs/components/src/radio-button/radio-button.component.spec.ts

@@ -0,0 +1,79 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { RadioButtonModule } from "./radio-button.module";
+import { RadioGroupComponent } from "./radio-group.component";
+
+describe("RadioButton", () => {
+  let mockGroupComponent: MockedButtonGroupComponent;
+  let fixture: ComponentFixture<TestApp>;
+  let testAppComponent: TestApp;
+  let radioButton: HTMLInputElement;
+
+  beforeEach(waitForAsync(() => {
+    mockGroupComponent = new MockedButtonGroupComponent();
+
+    TestBed.configureTestingModule({
+      imports: [RadioButtonModule],
+      declarations: [TestApp],
+      providers: [
+        { provide: RadioGroupComponent, useValue: mockGroupComponent },
+        { provide: I18nService, useValue: new I18nMockService({}) },
+      ],
+    });
+
+    TestBed.compileComponents();
+    fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+    testAppComponent = fixture.debugElement.componentInstance;
+    radioButton = fixture.debugElement.query(By.css("input[type=radio]")).nativeElement;
+  }));
+
+  it("should emit value when clicking on radio button", () => {
+    testAppComponent.value = "value";
+    fixture.detectChanges();
+
+    radioButton.click();
+    fixture.detectChanges();
+
+    expect(mockGroupComponent.onInputChange).toHaveBeenCalledWith("value");
+  });
+
+  it("should check radio button when selected matches value", () => {
+    testAppComponent.value = "value";
+    fixture.detectChanges();
+
+    mockGroupComponent.selected = "value";
+    fixture.detectChanges();
+
+    expect(radioButton.checked).toBe(true);
+  });
+
+  it("should not check radio button when selected does not match value", () => {
+    testAppComponent.value = "value";
+    fixture.detectChanges();
+
+    mockGroupComponent.selected = "nonMatchingValue";
+    fixture.detectChanges();
+
+    expect(radioButton.checked).toBe(false);
+  });
+});
+
+class MockedButtonGroupComponent implements Partial<RadioGroupComponent> {
+  onInputChange = jest.fn();
+  selected = null;
+}
+
+@Component({
+  selector: "test-app",
+  template: ` <bit-radio-button [value]="value">Element</bit-radio-button>`,
+})
+class TestApp {
+  value?: string;
+}

libs/components/src/radio-button/radio-button.component.ts

@@ -0,0 +1,40 @@
+import { Component, HostBinding, Input } from "@angular/core";
+
+import { RadioGroupComponent } from "./radio-group.component";
+
+let nextId = 0;
+
+@Component({
+  selector: "bit-radio-button",
+  templateUrl: "radio-button.component.html",
+})
+export class RadioButtonComponent {
+  @HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
+  @Input() value: unknown;
+
+  constructor(private groupComponent: RadioGroupComponent) {}
+
+  get inputId() {
+    return `${this.id}-input`;
+  }
+
+  get name() {
+    return this.groupComponent.name;
+  }
+
+  get selected() {
+    return this.groupComponent.selected === this.value;
+  }
+
+  get disabled() {
+    return this.groupComponent.disabled;
+  }
+
+  protected onInputChange() {
+    this.groupComponent.onInputChange(this.value);
+  }
+
+  protected onBlur() {
+    this.groupComponent.onBlur();
+  }
+}

libs/components/src/radio-button/radio-button.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { FormControlModule } from "../form-control";
+
+import { RadioButtonComponent } from "./radio-button.component";
+import { RadioGroupComponent } from "./radio-group.component";
+import { RadioInputComponent } from "./radio-input.component";
+
+@NgModule({
+  imports: [CommonModule, FormControlModule],
+  declarations: [RadioInputComponent, RadioButtonComponent, RadioGroupComponent],
+  exports: [FormControlModule, RadioInputComponent, RadioButtonComponent, RadioGroupComponent],
+})
+export class RadioButtonModule {}

libs/components/src/radio-button/radio-button.stories.ts

@@ -0,0 +1,107 @@
+import { Component, Input } from "@angular/core";
+import { FormsModule, ReactiveFormsModule, FormBuilder } from "@angular/forms";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { RadioButtonModule } from "./radio-button.module";
+
+const template = `
+  <form [formGroup]="formObj">
+    <bit-radio-group formControlName="radio" aria-label="Example radio group">
+      <bit-label *ngIf="label">Group of radio buttons</bit-label>
+      <bit-radio-button [value]="TestValue.First" id="radio-first">First</bit-radio-button>
+      <bit-radio-button [value]="TestValue.Second" id="radio-second">Second</bit-radio-button>
+      <bit-radio-button [value]="TestValue.Third" id="radio-third">Third</bit-radio-button>
+    </bit-radio-group>
+  </form>`;
+
+enum TestValue {
+  First,
+  Second,
+  Third,
+}
+
+@Component({
+  selector: "app-example",
+  template,
+})
+class ExampleComponent {
+  protected TestValue = TestValue;
+
+  protected formObj = this.formBuilder.group({
+    radio: TestValue.First,
+  });
+
+  @Input() label: boolean;
+
+  @Input() set selected(value: TestValue) {
+    this.formObj.patchValue({ radio: value });
+  }
+
+  @Input() set disabled(disable: boolean) {
+    if (disable) {
+      this.formObj.disable();
+    } else {
+      this.formObj.enable();
+    }
+  }
+
+  constructor(private formBuilder: FormBuilder) {}
+}
+
+export default {
+  title: "Component Library/Form/Radio Button",
+  component: ExampleComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [ExampleComponent],
+      imports: [FormsModule, ReactiveFormsModule, RadioButtonModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              required: "required",
+              inputRequired: "Input is required.",
+              inputEmail: "Input is not an email-address.",
+            });
+          },
+        },
+      ],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=3930%3A16850&t=xXPx6GJYsJfuMQPE-4",
+    },
+  },
+  args: {
+    selected: TestValue.First,
+    disabled: false,
+    label: true,
+  },
+  argTypes: {
+    selected: {
+      options: [TestValue.First, TestValue.Second, TestValue.Third],
+      control: {
+        type: "inline-radio",
+        labels: {
+          [TestValue.First]: "First",
+          [TestValue.Second]: "Second",
+          [TestValue.Third]: "Third",
+        },
+      },
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: Story<ExampleComponent> = (args: ExampleComponent) => ({
+  props: args,
+  template: `<app-example [selected]="selected" [disabled]="disabled" [label]="label"></app-example>`,
+});
+
+export const Default = DefaultTemplate.bind({});

libs/components/src/radio-button/radio-group.component.html

@@ -0,0 +1,14 @@
+<ng-container *ngIf="label">
+  <fieldset>
+    <legend class="tw-mb-1 tw-block tw-text-sm tw-font-semibold tw-text-main">
+      <ng-content select="bit-label"></ng-content>
+    </legend>
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </fieldset>
+</ng-container>
+
+<ng-container *ngIf="!label">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</ng-container>
+
+<ng-template #content><ng-content></ng-content></ng-template>

libs/components/src/radio-button/radio-group.component.spec.ts

@@ -0,0 +1,79 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { RadioButtonComponent } from "./radio-button.component";
+import { RadioButtonModule } from "./radio-button.module";
+
+describe("RadioGroupComponent", () => {
+  let fixture: ComponentFixture<TestApp>;
+  let testAppComponent: TestApp;
+  let buttonElements: RadioButtonComponent[];
+  let radioButtons: HTMLInputElement[];
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [FormsModule, RadioButtonModule],
+      declarations: [TestApp],
+      providers: [{ provide: I18nService, useValue: new I18nMockService({}) }],
+    });
+
+    TestBed.compileComponents();
+    fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+    testAppComponent = fixture.debugElement.componentInstance;
+    buttonElements = fixture.debugElement
+      .queryAll(By.css("bit-radio-button"))
+      .map((e) => e.componentInstance);
+    radioButtons = fixture.debugElement
+      .queryAll(By.css("input[type=radio]"))
+      .map((e) => e.nativeElement);
+
+    fixture.detectChanges();
+  }));
+
+  it("should select second element when setting selected to second", async () => {
+    testAppComponent.selected = "second";
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(buttonElements[1].selected).toBe(true);
+  });
+
+  it("should not select second element when setting selected to third", async () => {
+    testAppComponent.selected = "third";
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(buttonElements[1].selected).toBe(false);
+  });
+
+  it("should emit new value when changing selection by clicking on radio button", async () => {
+    testAppComponent.selected = "first";
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    radioButtons[1].click();
+
+    expect(testAppComponent.selected).toBe("second");
+  });
+});
+
+@Component({
+  selector: "test-app",
+  template: `
+    <bit-radio-group [(ngModel)]="selected">
+      <bit-radio-button value="first">First</bit-radio-button>
+      <bit-radio-button value="second">Second</bit-radio-button>
+      <bit-radio-button value="third">Third</bit-radio-button>
+    </bit-radio-group>
+  `,
+})
+class TestApp {
+  selected?: string;
+}

libs/components/src/radio-button/radio-group.component.ts

@@ -0,0 +1,63 @@
+import { Component, ContentChild, HostBinding, Input, Optional, Self } from "@angular/core";
+import { ControlValueAccessor, NgControl } from "@angular/forms";
+
+import { BitLabel } from "../form-control/label.directive";
+
+let nextId = 0;
+
+@Component({
+  selector: "bit-radio-group",
+  templateUrl: "radio-group.component.html",
+})
+export class RadioGroupComponent implements ControlValueAccessor {
+  selected: unknown;
+  disabled = false;
+
+  private _name?: string;
+  @Input() get name() {
+    return this._name ?? this.ngControl?.name?.toString();
+  }
+  set name(value: string) {
+    this._name = value;
+  }
+
+  @HostBinding("attr.role") role = "radiogroup";
+  @HostBinding("attr.id") @Input() id = `bit-radio-group-${nextId++}`;
+
+  @ContentChild(BitLabel) protected label: BitLabel;
+
+  constructor(@Optional() @Self() private ngControl?: NgControl) {
+    if (ngControl != null) {
+      ngControl.valueAccessor = this;
+    }
+  }
+
+  // ControlValueAccessor
+  onChange: (value: unknown) => void;
+  onTouched: () => void;
+
+  writeValue(value: boolean): void {
+    this.selected = value;
+  }
+
+  registerOnChange(fn: (value: unknown) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onInputChange(value: unknown) {
+    this.selected = value;
+    this.onChange(this.selected);
+  }
+
+  onBlur() {
+    this.onTouched();
+  }
+}

libs/components/src/radio-button/radio-input.component.ts

@@ -0,0 +1,99 @@
+import { Component, HostBinding, Input, Optional, Self } from "@angular/core";
+import { NgControl, Validators } from "@angular/forms";
+
+import { BitFormControlAbstraction } from "../form-control";
+
+let nextId = 0;
+
+@Component({
+  selector: "input[type=radio][bitRadio]",
+  template: "",
+  providers: [{ provide: BitFormControlAbstraction, useExisting: RadioInputComponent }],
+})
+export class RadioInputComponent implements BitFormControlAbstraction {
+  @HostBinding("attr.id") @Input() id = `bit-radio-input-${nextId++}`;
+
+  @HostBinding("class")
+  protected inputClasses = [
+    "tw-appearance-none",
+    "tw-outline-none",
+    "tw-relative",
+    "tw-transition",
+    "tw-cursor-pointer",
+    "tw-inline-block",
+    "tw-rounded-full",
+    "tw-border",
+    "tw-border-solid",
+    "tw-border-secondary-500",
+    "tw-w-3.5",
+    "tw-h-3.5",
+    "tw-mr-1.5",
+    "tw-bottom-[-1px]", // Fix checkbox looking off-center
+
+    "hover:tw-border-2",
+    "[&>label:hover]:tw-border-2",
+
+    "before:tw-content-['']",
+    "before:tw-transition",
+    "before:tw-block",
+    "before:tw-absolute",
+    "before:tw-rounded-full",
+    "before:tw-inset-[2px]",
+
+    "focus-visible:tw-ring-2",
+    "focus-visible:tw-ring-offset-2",
+    "focus-visible:tw-ring-primary-700",
+
+    "disabled:tw-cursor-auto",
+    "disabled:tw-border",
+    "disabled:tw-bg-secondary-100",
+
+    "checked:tw-bg-text-contrast",
+    "checked:tw-border-primary-500",
+
+    "checked:hover:tw-border",
+    "checked:hover:tw-border-primary-700",
+    "checked:hover:before:tw-bg-primary-700",
+    "[&>label:hover]:checked:tw-bg-primary-700",
+    "[&>label:hover]:checked:tw-border-primary-700",
+
+    "checked:before:tw-bg-primary-500",
+
+    "checked:disabled:tw-border-secondary-100",
+    "checked:disabled:tw-bg-secondary-100",
+
+    "checked:disabled:before:tw-bg-text-muted",
+  ];
+
+  constructor(@Optional() @Self() private ngControl?: NgControl) {}
+
+  @HostBinding()
+  @Input()
+  get disabled() {
+    return this._disabled ?? this.ngControl?.disabled ?? false;
+  }
+  set disabled(value: any) {
+    this._disabled = value != null && value !== false;
+  }
+  private _disabled: boolean;
+
+  @Input()
+  get required() {
+    return (
+      this._required ?? this.ngControl?.control?.hasValidator(Validators.requiredTrue) ?? false
+    );
+  }
+  set required(value: any) {
+    this._required = value != null && value !== false;
+  }
+  private _required: boolean;
+
+  get hasError() {
+    return this.ngControl?.status === "INVALID" && this.ngControl?.touched;
+  }
+
+  get error(): [string, any] {
+    const key = Object.keys(this.ngControl.errors)[0];
+    return [key, this.ngControl.errors[key]];
+  }
+}