@brickclay-org/ui

v0.0.17

Published

3 days ago

A comprehensive Angular UI component library featuring a rich collection of customizable, accessible components. Built with modern Angular standards, this library provides everything you need to build beautiful and functional user interfaces.

0High
0Medium
0Low

@brickclay-org/ui

🌟 Features

📦 Comprehensive Component Library - Rich set of UI components for common use cases
♿ Accessible by Default - WCAG compliant components with keyboard navigation and screen reader support
🚀 Angular 20+ Ready - Built with latest Angular features and standalone components
📱 Responsive Design - Mobile-first components that work on all screen sizes
🎯 Type-Safe - Full TypeScript support with comprehensive type definitions
⚡ Lightweight - Tree-shakeable and optimized for performance
🎛️ Highly Customizable - Extensive configuration options for every component

📚 Available Components

Calendar Components

A powerful calendar suite with advanced date and time selection capabilities. The calendar components support single date selection, date ranges, multiple date selection, and integrated time pickers.

Toggle Component

A customizable toggle/switch component with support for Angular forms integration via ngModel and reactive forms. Features three size variants (small, medium, large), disabled state, and full accessibility support.

Checkbox Component

A fully accessible checkbox component with Angular forms integration. Features customizable styling via CSS classes, disabled state, keyboard navigation, and seamless integration with both template-driven and reactive forms.

Radio Component

A fully accessible radio button component with Angular forms integration. Features two visual variants (dot and tick), customizable styling, disabled state, keyboard navigation, and seamless integration with both template-driven and reactive forms.

Pill Component

A versatile pill component for displaying labels, tags, or status indicators. Features multiple variants (Light, Solid, Outline, Transparent), color options, size variants, optional dot indicators, and removable functionality with click events.

Badge Component

A flexible badge component for displaying labels, tags, or status indicators. Features multiple variants (Light, Solid, Outline, Transparent), color options, size variants, optional dot indicators, and removable functionality with click events.

Button Component

A versatile button component with support for text labels, icons, loading states, and multiple variants. Features seven size options, two variants (primary/secondary), optional left/right icons, loading spinner, and full customization support.

Icon Button Component

A compact icon-only button component perfect for toolbars and action buttons. Features seven size options, two variants (primary/secondary), and customizable styling.

Button Group Component

A button group component for creating toggleable button sets. Supports single and multiple selection modes, with automatic state management and value change events.

Spinner Component

A loading spinner component for indicating asynchronous operations. Features five size variants, customizable colors, and show/hide control.

More components coming soon...

Installation

npm i @brickclay-org/[email protected]

Peer Dependencies

This library requires Angular 20.3.0 or higher:

npm install @angular/common@^20.3.0 @angular/core@^20.3.0 moment

Asset Configuration (Required)

After installing the library, you need to configure your angular.json to include the library's assets (icons, etc.). Add the following to your project's assets array in the build options:

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/@brickclay-org/ui/assets",
                "output": "/assets/brickclay-lib/"
              }
            ]
          }
        }
      }
    }
  }
}

This configuration copies the library's assets (SVG icons, etc.) to your application's output folder during build. Without this, the component icons will not display correctly.

Quick Start

Standalone Component Usage (Recommended)

import { Component } from '@angular/core';
import { CustomCalendarComponent, CalendarSelection } from '@brickclay/ui';

@Component({
  standalone: true,
  selector: 'app-my-component',
  imports: [CustomCalendarComponent],
  template: `
    <brickclay-custom-calendar (selected)="onDateSelected($event)"> </brickclay-custom-calendar>
  `,
})
export class MyComponent {
  onDateSelected(selection: CalendarSelection) {
    console.log('Selected:', selection);
  }
}

Module-based Usage

import { NgModule } from '@angular/core';
import { CalendarModule } from '@brickclay/ui';

@NgModule({
  imports: [CalendarModule],
  // ...
})
export class AppModule {}

📅 Calendar

The calendar components provide a complete solution for date and time selection in your Angular applications. All components are standalone and can be imported individually or as part of the CalendarModule.

Components Overview

CustomCalendarComponent (brickclay-custom-calendar) - Main calendar component with support for single date, date range, and multiple date selection
ScheduledDatePickerComponent (brickclay-scheduled-date-picker) - Advanced scheduling component with time configuration for events
TimePickerComponent (brickclay-time-picker) - Standalone time selection component with scrollable pickers

CustomCalendarComponent

A versatile calendar component that supports single date, date range, and multiple date selection modes.

Basic Example

import { CustomCalendarComponent, CalendarSelection } from '@brickclay/ui';

@Component({
  template: `
    <brickclay-custom-calendar
      [singleDatePicker]="false"
      [dualCalendar]="true"
      [enableTimepicker]="true"
      [showRanges]="true"
      [placeholder]="'Select date range'"
      (selected)="onDateSelected($event)"
    >
    </brickclay-custom-calendar>
  `,
})
export class MyComponent {
  onDateSelected(selection: CalendarSelection) {
    console.log('Start:', selection.startDate);
    console.log('End:', selection.endDate);
  }
}

Component Selector

<brickclay-custom-calendar>

Inputs

| Input | Type | -------------------- | enableTimepicker | autoApply | closeOnAutoApply | showCancel | singleDatePicker | dualCalendar | showRanges | multiDateSelection | inline | minDate | maxDate | placeholder | opens | drop | displayFormat | customRanges | selectedValue | isDisplayCrossIcon | Default | Description | | ------------------------------- | --------------------- | ------------------------------------------------- | | boolean | false | Enable time selection | | boolean | false | Automatically apply selection when date is chosen | | boolean | false | Close calendar after auto-apply | | boolean | true | Show cancel button in footer | | boolean | false | Enable single date selection mode | | boolean | false | Show two calendars side-by-side | | boolean | true | Show predefined date range buttons | | boolean | false | Enable multiple date selection | | boolean | false | Always show calendar (no dropdown) | | Date | undefined | Minimum selectable date | | Date | undefined | Maximum selectable date | | string | 'Select date range' | Input placeholder text | | 'left' \| 'right' \| 'center' | 'left' | Dropdown alignment | | 'up' \| 'down' | 'down' | Dropdown direction | | string | 'MM/DD/YYYY' | Date display format (moment format) | | Record<string, CalendarRange> | undefined | Custom predefined ranges | | CalendarSelection \| null | null | Pre-selected date(s) | | boolean | true | Show/hide clear button |

Outputs

| Output | Type | Description | | ---------- | --------------------------------- | ----------------------------------- | | selected | EventEmitter<CalendarSelection> | Emitted when date selection changes | | opened | EventEmitter<void> | Emitted when calendar opens | | closed | EventEmitter<void> | Emitted when calendar closes |

Usage Examples

Single Date Selection:

<brickclay-custom-calendar
  [singleDatePicker]="true"
  [placeholder]="'Select a date'"
  (selected)="onDateSelected($event)">
</brickclay-custom-calendar>

Date Range with Time Picker:

<brickclay-custom-calendar
  [dualCalendar]="true"
  [enableTimepicker]="true"
  [enableSeconds]="true"
  (selected)="onRangeSelected($event)">
</brickclay-custom-calendar>

Multiple Date Selection:

<brickclay-custom-calendar
  [multiDateSelection]="true"
  [inline]="true"
  (selected)="onMultipleDatesSelected($event)">
</brickclay-custom-calendar>

Inline Calendar:

<brickclay-custom-calendar
  [inline]="true"
  [dualCalendar]="false"
  [showRanges]="false"
  (selected)="onDateSelected($event)">
</brickclay-custom-calendar>

Custom Date Ranges:

import { CalendarRange } from '@brickclay/ui';

const customRanges: Record<string, CalendarRange> = {
  'Last Week': {
    start: new Date(2024, 0, 1),
    end: new Date(2024, 0, 7)
  },
  'This Quarter': {
    start: new Date(2024, 0, 1),
    end: new Date(2024, 2, 31)
  }
};

<brickclay-custom-calendar
  [customRanges]="customRanges"
  [showRanges]="true"
  (selected)="onDateSelected($event)">
</brickclay-custom-calendar>

Date Constraints:

<brickclay-custom-calendar
  [minDate]="new Date(2024, 0, 1)"
  [maxDate]="new Date(2024, 11, 31)"
  (selected)="onDateSelected($event)">
</brickclay-custom-calendar>

Pre-selected Values:

export class MyComponent {
  selectedValue: CalendarSelection = {
    startDate: new Date(2024, 5, 15),
    endDate: new Date(2024, 5, 20)
  };

  onDateChange() {
    this.selectedValue = {
      startDate: new Date(),
      endDate: new Date()
    };
  }
}

<brickclay-custom-calendar
  [selectedValue]="selectedValue"
  (selected)="onDateSelected($event)">
</brickclay-custom-calendar>

ScheduledDatePickerComponent

A comprehensive date and time scheduling component with three modes: single date, multiple dates, and date range, each with time configuration.

Basic Example

import { ScheduledDatePickerComponent, ScheduledDateSelection } from '@brickclay/ui';

@Component({
  template: `
    <brickclay-scheduled-date-picker [timeFormat]="12" (scheduled)="onScheduled($event)">
    </brickclay-scheduled-date-picker>
  `,
})
export class MyComponent {
  onScheduled(selection: ScheduledDateSelection) {
    console.log('Mode:', selection.mode);
    if (selection.mode === 'single' && selection.singleDate) {
      console.log('Start:', selection.singleDate.startDate);
      console.log('End:', selection.singleDate.endDate);
      console.log('All Day:', selection.singleDate.allDay);
    }
  }
}

Component Selector

<brickclay-scheduled-date-picker>

Inputs

| Input | Type | Default | Description | | --------------- | ---------- | ------- | -------------------------------- | | timeFormat | 12 \| 24 | 12 | Time format (12-hour or 24-hour) | | enableSeconds | boolean | false | Enable seconds in time picker |

Outputs

| Output | Type | Description | | ----------- | -------------------------------------- | ------------------------------------ | | scheduled | EventEmitter<ScheduledDateSelection> | Emitted when selection changes | | cleared | EventEmitter<void> | Emitted when clear button is clicked |

Features

Single Date Mode: Select one date with optional start and end times
Multiple Dates Mode: Select multiple dates, each with individual time configuration
Date Range Mode: Select a date range with start and end times
All Day Toggle: Mark dates as all-day events
Time Configuration: Individual time pickers for each date/range

TimePickerComponent

A standalone time picker component with scrollable hour, minute, and AM/PM selectors.

Basic Example

import { TimePickerComponent } from '@brickclay/ui';

@Component({
  template: `
    <brickclay-time-picker
      [value]="selectedTime"
      [label]="'Start Time'"
      [timeFormat]="12"
      (timeChange)="onTimeChange($event)"
    >
    </brickclay-time-picker>
  `,
})
export class MyComponent {
  selectedTime = '1:00 AM';

  onTimeChange(time: string) {
    this.selectedTime = time;
    console.log('New time:', time);
  }
}

Component Selector

<brickclay-time-picker>

Inputs

| Input | Type | Default | Description | | ------------- | ------------------- | --------------- | ---------------------------------------------------- | | value | string | '1:00 AM' | Current time value (format: "H:MM AM/PM" or "HH:MM") | | label | string | 'Time' | Label text | | placeholder | string | 'Select time' | Placeholder text | | position | 'left' \| 'right' | 'left' | Dropdown position | | pickerId | string | '' | Unique identifier for the picker | | closePicker | number | 0 | Counter to trigger picker close | | timeFormat | 12 \| 24 | 12 | Time format (12-hour or 24-hour) | | showSeconds | boolean | false | Show seconds selector |

Outputs

| Output | Type | Description | | -------------- | ---------------------- | -------------------------- | | timeChange | EventEmitter<string> | Emitted when time changes | | pickerOpened | EventEmitter<string> | Emitted when picker opens | | pickerClosed | EventEmitter<string> | Emitted when picker closes |

Features

Scrollable time selectors
Keyboard navigation support
12-hour and 24-hour formats
Optional seconds support
Multiple picker coordination (only one open at a time)
Click outside to close

Time Format Examples

12-hour format:

value = '1:00 AM';
value = '12:30 PM';
value = '11:45 PM';

24-hour format:

value = '01:00';
value = '13:30';
value = '23:45';

🔘 Toggle

A versatile toggle/switch component that integrates seamlessly with Angular forms. Supports both template-driven forms (ngModel) and reactive forms, with full accessibility features and keyboard navigation.

ToggleComponent

A standalone toggle component that implements ControlValueAccessor for seamless Angular forms integration.

Basic Example

import { ToggleComponent } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';

@Component({
  template: `
    <brickclay-toggle
      [(ngModel)]="isEnabled"
      [label]="'Enable notifications'"
      (change)="onToggleChange($event)"
    >
    </brickclay-toggle>
  `,
  imports: [ToggleComponent, FormsModule],
})
export class MyComponent {
  isEnabled = false;

  onToggleChange(value: boolean) {
    console.log('Toggle state:', value);
  }
}

Component Selector

<brickclay-toggle>

Inputs

| Input | Type | Default | Description | | ------------- | --------- | ------------- | -------------------------------------------------------------------------------- | | label | string | '' | Optional label text displayed next to the toggle | | disabled | boolean | false | Disables the toggle interaction | | toggleClass | string | 'toggle-md' | CSS class for size styling. Options: 'toggle-sm', 'toggle-md', 'toggle-lg' |

Outputs

| Output | Type | Description | | -------- | ----------------------- | ------------------------------------------------------------- | | change | EventEmitter<boolean> | Emitted when toggle state changes (returns new boolean value) |

Features

✅ Angular Forms Integration - Full support for ngModel and reactive forms
✅ Three Size Variants - Small (toggle-sm), Medium (toggle-md), Large (toggle-lg)
✅ Accessibility - ARIA attributes, keyboard navigation, and screen reader support
✅ Disabled State - Visual and functional disabled state
✅ Customizable Styling - Custom CSS classes for size and appearance
✅ Event Handling - change event for state change notifications

Usage Examples

Basic Toggle with ngModel:

import { ToggleComponent } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';

@Component({
  template: `
    <brickclay-toggle [(ngModel)]="isActive" [label]="'Active Status'"> </brickclay-toggle>
  `,
  imports: [ToggleComponent, FormsModule],
})
export class MyComponent {
  isActive = true;
}

Different Sizes:

<brickclay-toggle
  [(ngModel)]="value1"
  [toggleClass]="'toggle-sm'"
  [label]="'Small Toggle'">
</brickclay-toggle>

<brickclay-toggle
  [(ngModel)]="value2"
  [toggleClass]="'toggle-md'"
  [label]="'Medium Toggle'">
</brickclay-toggle>

<brickclay-toggle
  [(ngModel)]="value3"
  [toggleClass]="'toggle-lg'"
  [label]="'Large Toggle'">
</brickclay-toggle>

Disabled State:

<brickclay-toggle
  [ngModel]="true"
  [disabled]="true"
  [label]="'Disabled Toggle'">
</brickclay-toggle>

With Event Handler:

@Component({
  template: `
    <brickclay-toggle
      [(ngModel)]="notificationsEnabled"
      [label]="'Email Notifications'"
      (change)="onNotificationToggle($event)"
    >
    </brickclay-toggle>
  `,
})
export class MyComponent {
  notificationsEnabled = false;

  onNotificationToggle(enabled: boolean) {
    if (enabled) {
      this.enableNotifications();
    } else {
      this.disableNotifications();
    }
  }
}

Reactive Forms Integration:

import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ToggleComponent } from '@brickclay/ui';

@Component({
  template: `
    <form [formGroup]="settingsForm">
      <brickclay-toggle formControlName="darkMode" [label]="'Dark Mode'"> </brickclay-toggle>

      <brickclay-toggle formControlName="notifications" [label]="'Push Notifications'">
      </brickclay-toggle>
    </form>
  `,
  imports: [ToggleComponent, ReactiveFormsModule],
})
export class SettingsComponent {
  settingsForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.settingsForm = this.fb.group({
      darkMode: [false],
      notifications: [true],
    });
  }
}

Without Label:

<brickclay-toggle
  [(ngModel)]="isEnabled"
  [toggleClass]="'toggle-md'">
</brickclay-toggle>

Styling

The toggle component uses CSS classes for size variants:

Small: toggle-sm - Width: 28px (w-7)
Medium: toggle-md - Width: 36px (w-9) - Default
Large: toggle-lg - Width: 44px (w-11)

The component includes built-in styles for:

On state (green background: #22973F)
Off state (gray background: #BBBDC5)
Disabled state (light gray: #D6D7DC)
Hover states
Focus ring for accessibility
Smooth transitions

Accessibility

The toggle component includes:

role="switch" for screen readers
aria-checked attribute that reflects the current state
Keyboard navigation support
Focus visible ring for keyboard users
Disabled state properly communicated to assistive technologies

☑️ Checkbox

A fully accessible checkbox component that integrates seamlessly with Angular forms. Supports both template-driven forms (ngModel) and reactive forms, with customizable styling and comprehensive accessibility features.

CheckboxComponent

A standalone checkbox component that implements ControlValueAccessor for seamless Angular forms integration.

Basic Example

import { CheckboxComponent } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';

@Component({
  template: `
    <brickclay-checkbox
      [(ngModel)]="isAccepted"
      [label]="'I agree to the terms and conditions'"
      (change)="onCheckboxChange($event)"
    >
    </brickclay-checkbox>
  `,
  imports: [CheckboxComponent, FormsModule],
})
export class MyComponent {
  isAccepted = false;

  onCheckboxChange(value: boolean) {
    console.log('Checkbox state:', value);
  }
}

Component Selector

<brickclay-checkbox>

Inputs

| Input | Type | Default | Description | | --------------- | --------- | ------- | -------------------------------------------------------------------- | | label | string | '' | Optional label text displayed next to the checkbox | | disabled | boolean | false | Disables the checkbox interaction | | checkboxClass | string | '' | CSS class for size styling. Options: 'xsm', 'sm', 'md', 'lg' | | labelClass | string | '' | Custom CSS classes for the label text |

Outputs

| Output | Type | Description | | -------- | ----------------------- | --------------------------------------------------------------- | | change | EventEmitter<boolean> | Emitted when checkbox state changes (returns new boolean value) |

Features

✅ Angular Forms Integration - Full support for ngModel and reactive forms
✅ Four Size Variants - Extra Small (xsm), Small (sm), Medium (md), Large (lg)
✅ Accessibility - ARIA attributes, keyboard navigation (Enter/Space), and screen reader support
✅ Disabled State - Visual and functional disabled state
✅ Keyboard Support - Full keyboard navigation with Enter and Space keys
✅ Focus Management - Focus visible ring for keyboard users
✅ Event Handling - change event for state change notifications

Usage Examples

Basic Checkbox with ngModel:

import { CheckboxComponent } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';

@Component({
  template: `
    <brickclay-checkbox [(ngModel)]="isChecked" [label]="'Accept terms'"> </brickclay-checkbox>
  `,
  imports: [CheckboxComponent, FormsModule],
})
export class MyComponent {
  isChecked = false;
}

Different Sizes:

<!-- Extra Small checkbox -->
<brickclay-checkbox
  [(ngModel)]="value1"
  [checkboxClass]="'xsm'"
  [label]="'Extra Small Checkbox'">
</brickclay-checkbox>

<!-- Small checkbox -->
<brickclay-checkbox
  [(ngModel)]="value2"
  [checkboxClass]="'sm'"
  [label]="'Small Checkbox'">
</brickclay-checkbox>

<!-- Medium checkbox -->
<brickclay-checkbox
  [(ngModel)]="value3"
  [checkboxClass]="'md'"
  [label]="'Medium Checkbox'">
</brickclay-checkbox>

<!-- Large checkbox with custom label styling -->
<brickclay-checkbox
  [(ngModel)]="value4"
  [checkboxClass]="'lg'"
  [labelClass]="'text-lg font-bold'"
  [label]="'Large Checkbox'">
</brickclay-checkbox>

Disabled State:

<brickclay-checkbox
  [ngModel]="true"
  [disabled]="true"
  [label]="'Disabled Checkbox'">
</brickclay-checkbox>

With Event Handler:

@Component({
  template: `
    <brickclay-checkbox
      [(ngModel)]="newsletterSubscribed"
      [label]="'Subscribe to newsletter'"
      (change)="onNewsletterToggle($event)"
    >
    </brickclay-checkbox>
  `,
})
export class MyComponent {
  newsletterSubscribed = false;

  onNewsletterToggle(subscribed: boolean) {
    if (subscribed) {
      this.subscribeToNewsletter();
    } else {
      this.unsubscribeFromNewsletter();
    }
  }
}

Reactive Forms Integration:

import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { CheckboxComponent } from '@brickclay/ui';

@Component({
  template: `
    <form [formGroup]="registrationForm">
      <brickclay-checkbox
        formControlName="acceptTerms"
        [label]="'I accept the terms and conditions'"
      >
      </brickclay-checkbox>

      <brickclay-checkbox formControlName="receiveUpdates" [label]="'Receive product updates'">
      </brickclay-checkbox>
    </form>
  `,
  imports: [CheckboxComponent, ReactiveFormsModule],
})
export class RegistrationComponent {
  registrationForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.registrationForm = this.fb.group({
      acceptTerms: [false, Validators.requiredTrue],
      receiveUpdates: [false],
    });
  }
}

Without Label:

<brickclay-checkbox
  [(ngModel)]="isSelected"
  [checkboxClass]="'md'">
</brickclay-checkbox>

Multiple Checkboxes:

@Component({
  template: `
    <div>
      <brickclay-checkbox
        *ngFor="let option of options"
        [(ngModel)]="option.selected"
        [label]="option.label"
        (change)="onOptionChange(option)"
      >
      </brickclay-checkbox>
    </div>
  `,
})
export class MyComponent {
  options = [
    { label: 'Option 1', selected: false },
    { label: 'Option 2', selected: false },
    { label: 'Option 3', selected: false },
  ];

  onOptionChange(option: any) {
    console.log(`${option.label} is now ${option.selected ? 'selected' : 'deselected'}`);
  }
}

Styling

The checkbox component supports predefined size classes:

Extra Small: xsm - 14px × 14px
Small: sm - 16px × 16px
Medium: md - 18px × 18px
Large: lg - 20px × 20px

Use labelClass to style the label text (font size, weight, color, etc.)

The component includes built-in styles for:

Checked state (black background with white checkmark/tick icon)
Unchecked state (white background with gray border)
Hover states (darker border on hover)
Disabled states (gray background and border)
Focus ring for accessibility (blue ring with offset)
Smooth transitions for state changes

Accessibility

The checkbox component includes:

Keyboard navigation support (Enter and Space keys)
Focus visible ring for keyboard users
Proper ARIA attributes
Disabled state properly communicated to assistive technologies
Tab navigation support

🔘 Radio Button

A fully accessible radio button component that integrates seamlessly with Angular forms. Supports both template-driven forms (ngModel) and reactive forms, with two visual variants (dot and tick) and comprehensive accessibility features.

RadioComponent

A standalone radio button component that implements ControlValueAccessor for seamless Angular forms integration. Radio buttons are used when only one option can be selected from a group.

Basic Example

import { RadioComponent } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';

@Component({
  template: `
    <brickclay-radio-button
      [(ngModel)]="selectedOption"
      [value]="'option1'"
      [label]="'Option 1'"
      (change)="onRadioChange($event)"
    >
    </brickclay-radio-button>

    <brickclay-radio-button [(ngModel)]="selectedOption" [value]="'option2'" [label]="'Option 2'">
    </brickclay-radio-button>
  `,
  imports: [RadioComponent, FormsModule],
})
export class MyComponent {
  selectedOption = 'option1';

  onRadioChange(value: any) {
    console.log('Selected option:', value);
  }
}

Component Selector

<brickclay-radio-button>

Inputs

| Input | Type | Default | Description | | ------------ | ----------------- | ----------- | ------------------------------------------------------------------------- | | label | string | '' | Optional label text displayed next to the radio button | | value | any | undefined | The value associated with this radio button (required for radio groups) | | disabled | boolean | false | Disables the radio button interaction | | variant | 'dot' \| 'tick' | 'dot' | Visual variant. 'dot' shows a filled circle, 'tick' shows a checkmark | | radioClass | string | '' | CSS class for size styling. Options: 'xsm', 'sm', 'md', 'lg' | | labelClass | string | '' | Custom CSS classes for the label text |

Outputs

| Output | Type | Description | | -------- | ------------------- | --------------------------------------------------------- | | change | EventEmitter<any> | Emitted when radio button is selected (returns the value) |

Features

✅ Angular Forms Integration - Full support for ngModel and reactive forms
✅ Two Visual Variants - Dot (filled circle) and Tick (checkmark) styles
✅ Four Size Variants - Extra Small (xsm), Small (sm), Medium (md), Large (lg)
✅ Radio Groups - Automatically groups radio buttons with the same ngModel binding
✅ Accessibility - ARIA attributes, keyboard navigation (Enter/Space), and screen reader support
✅ Disabled State - Visual and functional disabled state
✅ Keyboard Support - Full keyboard navigation with Enter and Space keys
✅ Focus Management - Focus visible ring for keyboard users
✅ Event Handling - change event for selection notifications

Usage Examples

Basic Radio Group with ngModel:

import { RadioComponent } from '@brickclay/ui';
import { FormsModule } from '@angular/forms';

@Component({
  template: `
    <brickclay-radio-button
      [(ngModel)]="selectedPayment"
      [value]="'credit'"
      [label]="'Credit Card'"
    >
    </brickclay-radio-button>

    <brickclay-radio-button [(ngModel)]="selectedPayment" [value]="'debit'" [label]="'Debit Card'">
    </brickclay-radio-button>

    <brickclay-radio-button [(ngModel)]="selectedPayment" [value]="'paypal'" [label]="'PayPal'">
    </brickclay-radio-button>
  `,
  imports: [RadioComponent, FormsModule],
})
export class MyComponent {
  selectedPayment = 'credit';
}

Dot Variant (Default):

<brickclay-radio-button
  [(ngModel)]="selectedOption"
  [value]="'option1'"
  [variant]="'dot'"
  [label]="'Option with Dot'">
</brickclay-radio-button>

Tick Variant:

<brickclay-radio-button
  [(ngModel)]="selectedOption"
  [value]="'option2'"
  [variant]="'tick'"
  [label]="'Option with Tick'">
</brickclay-radio-button>

Different Sizes:

<!-- Extra Small radio -->
<brickclay-radio-button
  [(ngModel)]="selectedOption"
  [value]="'xsm'"
  [radioClass]="'xsm'"
  [label]="'Extra Small Radio'">
</brickclay-radio-button>

<!-- Small radio -->
<brickclay-radio-button
  [(ngModel)]="selectedOption"
  [value]="'sm'"
  [radioClass]="'sm'"
  [label]="'Small Radio'">
</brickclay-radio-button>

<!-- Medium radio -->
<brickclay-radio-button
  [(ngModel)]="selectedOption"
  [value]="'md'"
  [radioClass]="'md'"
  [label]="'Medium Radio'">
</brickclay-radio-button>

<!-- Large radio with custom label styling -->
<brickclay-radio-button
  [(ngModel)]="selectedOption"
  [value]="'lg'"
  [radioClass]="'lg'"
  [labelClass]="'text-lg font-bold'"
  [label]="'Large Radio'">
</brickclay-radio-button>

Disabled State:

<brickclay-radio-button
  [(ngModel)]="selectedOption"
  [value]="'disabled-option'"
  [disabled]="true"
  [label]="'Disabled Option'">
</brickclay-radio-button>

With Event Handler:

@Component({
  template: `
    <brickclay-radio-button
      *ngFor="let option of options"
      [(ngModel)]="selectedOption"
      [value]="option.value"
      [label]="option.label"
      (change)="onOptionChange($event)"
    >
    </brickclay-radio-button>
  `,
})
export class MyComponent {
  options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];
  selectedOption = 'option1';

  onOptionChange(value: any) {
    console.log('Selected:', value);
  }
}

Reactive Forms Integration:

import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { RadioComponent } from '@brickclay/ui';

@Component({
  template: `
    <form [formGroup]="surveyForm">
      <brickclay-radio-button formControlName="rating" [value]="'excellent'" [label]="'Excellent'">
      </brickclay-radio-button>

      <brickclay-radio-button formControlName="rating" [value]="'good'" [label]="'Good'">
      </brickclay-radio-button>

      <brickclay-radio-button formControlName="rating" [value]="'fair'" [label]="'Fair'">
      </brickclay-radio-button>
    </form>
  `,
  imports: [RadioComponent, ReactiveFormsModule],
})
export class SurveyComponent {
  surveyForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.surveyForm = this.fb.group({
      rating: ['good', Validators.required],
    });
  }
}

Without Label:

<brickclay-radio-button
  [(ngModel)]="selectedOption"
  [value]="'option1'"
  [radioClass]="'md'">
</brickclay-radio-button>

Dynamic Radio Group:

@Component({
  template: `
    <div>
      <brickclay-radio-button
        *ngFor="let item of items"
        [(ngModel)]="selectedItem"
        [value]="item.id"
        [label]="item.name"
        [variant]="item.variant || 'dot'"
      >
      </brickclay-radio-button>
    </div>
  `,
})
export class MyComponent {
  items = [
    { id: 1, name: 'Item 1', variant: 'dot' },
    { id: 2, name: 'Item 2', variant: 'tick' },
    { id: 3, name: 'Item 3', variant: 'dot' },
  ];
  selectedItem = 1;
}

Styling

The radio button component supports predefined size classes:

Extra Small: xsm - 14px × 14px
Small: sm - 16px × 16px
Medium: md - 18px × 18px
Large: lg - 19px × 19px

Use labelClass to style the label text (font size, weight, color, etc.)

The component includes built-in styles for:

Dot Variant: Filled circle indicator when selected (size varies by radioClass)
Tick Variant: Checkmark indicator when selected (size varies by radioClass)
Unselected state (white background with gray border)
Hover states (darker border on hover)
Disabled states (gray background and border)
Focus ring for accessibility (blue ring with offset)
Smooth transitions for state changes

Accessibility

The radio button component includes:

Keyboard navigation support (Enter and Space keys)
Focus visible ring for keyboard users
Proper ARIA attributes
Disabled state properly communicated to assistive technologies
Tab navigation support
Radio group semantics for screen readers

Radio Groups

Radio buttons are automatically grouped when they share the same ngModel binding. Only one radio button in a group can be selected at a time. When a radio button is selected, the previously selected one in the same group is automatically deselected.

💊 Pill

A versatile pill component for displaying labels, tags, or status indicators. Perfect for categorizing content, showing status, or creating removable tag lists. Supports multiple visual variants, color schemes, sizes, and optional dot indicators.

PillComponent

A standalone pill component that displays text labels with customizable styling and optional removal functionality.

Basic Example

import { PillComponent } from '@brickclay/ui';

@Component({
  template: `
    <brickclay-pill
      [label]="'New Feature'"
      [variant]="'Solid'"
      [color]="'Primary'"
      [size]="'md'"
      (clicked)="onPillRemoved($event)"
    >
    </brickclay-pill>
  `,
  imports: [PillComponent],
})
export class MyComponent {
  onPillRemoved(label: string) {
    console.log('Pill removed:', label);
  }
}

Component Selector

<brickclay-pill>

Inputs

| Input | Type | Default | Description | | ------------ | --------------------------------------- | --------- | -------------------------------------------------------------------- | | label | string | '' | The text content displayed in the pill | | variant | 'Light' \| 'Solid' \| 'Outline' \| 'Transparent' | 'Light' | Visual style variant | | color | 'Gray' \| 'Primary' \| 'Error' \| 'Warning' \| 'Success' \| 'Purple' \| 'Cyan' | 'Gray' | Color scheme for the pill | | size | 'xsm' \| 'sm' \| 'md' \| 'lg' | 'md' | Size variant of the pill | | dot | 'left' \| 'right' \| 'none' | 'none' | Position of optional dot indicator (left, right, or none) | | removable | boolean | false | Whether to show a remove button | | customClass| string | '' | Additional CSS classes for custom styling |

Outputs

| Output | Type | Description | | -------- | ------------------------ | ----------------------------------------------------- | | clicked| EventEmitter<string> | Emitted when the remove button is clicked (returns label) |

Features

✅ Multiple Variants - Light, Solid, Outline, and Transparent styles
✅ Color Options - Gray, Primary, Error, Warning, Success, Purple, and Cyan
✅ Size Variants - Extra Small (xsm), Small (sm), Medium (md), Large (lg)
✅ Dot Indicators - Optional dot indicator on left or right side
✅ Removable - Optional remove button with click event
✅ Custom Styling - Additional CSS classes for custom appearance
✅ Event Handling - clicked event for remove button interactions

Usage Examples

Basic Pill:

import { PillComponent } from '@brickclay/ui';

@Component({
  template: `
    <brickclay-pill [label]="'Status'" [color]="'Success'"> </brickclay-pill>
  `,
  imports: [PillComponent],
})
export class MyComponent {}

Different Variants:

<!-- Light variant -->
<brickclay-pill
  [label]="'Light Pill'"
  [variant]="'Light'"
  [color]="'Primary'">
</brickclay-pill>

<!-- Solid variant -->
<brickclay-pill
  [label]="'Solid Pill'"
  [variant]="'Solid'"
  [color]="'Primary'">
</brickclay-pill>

<!-- Outline variant -->
<brickclay-pill
  [label]="'Outline Pill'"
  [variant]="'Outline'"
  [color]="'Primary'">
</brickclay-pill>

<!-- Transparent variant -->
<brickclay-pill
  [label]="'Transparent Pill'"
  [variant]="'Transparent'"
  [color]="'Primary'">
</brickclay-pill>

Different Colors:

<brickclay-pill [label]="'Gray'" [color]="'Gray'"> </brickclay-pill>
<brickclay-pill [label]="'Primary'" [color]="'Primary'"> </brickclay-pill>
<brickclay-pill [label]="'Error'" [color]="'Error'"> </brickclay-pill>
<brickclay-pill [label]="'Warning'" [color]="'Warning'"> </brickclay-pill>
<brickclay-pill [label]="'Success'" [color]="'Success'"> </brickclay-pill>
<brickclay-pill [label]="'Purple'" [color]="'Purple'"> </brickclay-pill>
<brickclay-pill [label]="'Cyan'" [color]="'Cyan'"> </brickclay-pill>

Different Sizes:

<!-- Extra Small -->
<brickclay-pill [label]="'XSM'" [size]="'xsm'"> </brickclay-pill>

<!-- Small -->
<brickclay-pill [label]="'SM'" [size]="'sm'"> </brickclay-pill>

<!-- Medium -->
<brickclay-pill [label]="'MD'" [size]="'md'"> </brickclay-pill>

<!-- Large -->
<brickclay-pill [label]="'LG'" [size]="'lg'"> </brickclay-pill>

With Dot Indicators:

<!-- Dot on left -->
<brickclay-pill
  [label]="'Active'"
  [dot]="'left'"
  [color]="'Success'">
</brickclay-pill>

<!-- Dot on right -->
<brickclay-pill
  [label]="'Pending'"
  [dot]="'right'"
  [color]="'Warning'">
</brickclay-pill>

Removable Pill:

@Component({
  template: `
    <brickclay-pill
      [label]="'Removable Tag'"
      [removable]="true"
      (clicked)="onRemoveTag($event)">
    </brickclay-pill>
  `,
})
export class MyComponent {
  onRemoveTag(label: string) {
    console.log('Removed:', label);
    // Remove from list, update state, etc.
  }
}

Dynamic Pill List:

@Component({
  template: `
    <div>
      <brickclay-pill
        *ngFor="let tag of tags"
        [label]="tag"
        [removable]="true"
        [color]="getTagColor(tag)"
        (clicked)="removeTag(tag)">
      </brickclay-pill>
    </div>
  `,
})
export class MyComponent {
  tags = ['Angular', 'TypeScript', 'RxJS', 'NgRx'];

  removeTag(tag: string) {
    this.tags = this.tags.filter((t) => t !== tag);
  }

  getTagColor(tag: string): 'Primary' | 'Success' | 'Warning' {
    // Custom logic to determine color
    return 'Primary';
  }
}

With Custom Classes:

<brickclay-pill
  [label]="'Custom Styled'"
  [customClass]="'my-custom-class font-bold'">
</brickclay-pill>

Styling

The pill component supports predefined size classes:

Extra Small: xsm
Small: sm
Medium: md - Default
Large: lg

The component includes built-in styles for:

All variant styles (Light, Solid, Outline, Transparent)
All color schemes (Gray, Primary, Error, Warning, Success, Purple, Cyan)
Dot indicators (left and right positions)
Remove button styling
Hover states
Smooth transitions

🏷️ Badge

A flexible badge component for displaying labels, tags, or status indicators. Perfect for categorizing content, showing status, or creating removable tag lists. Supports multiple visual variants, color schemes, sizes, and optional dot indicators.

BadgeComponent

A standalone badge component that displays text labels with customizable styling and optional removal functionality.

Basic Example

import { BadgeComponent } from '@brickclay/ui';

@Component({
  template: `
    <brickclay-badge
      [label]="'New'"
      [variant]="'Solid'"
      [color]="'Primary'"
      [size]="'md'"
      (clicked)="onBadgeRemoved($event)"
    >
    </brickclay-badge>
  `,
  imports: [BadgeComponent],
})
export class MyComponent {
  onBadgeRemoved(label: string) {
    console.log('Badge removed:', label);
  }
}

Component Selector

<brickclay-badge>

Inputs

| Input | Type | Default | Description | | ------------ | --------------------------------------- | --------- | -------------------------------------------------------------------- | | label | string | '' | The text content displayed in the badge | | variant | 'Light' \| 'Solid' \| 'Outline' \| 'Transparent' | 'Light' | Visual style variant | | color | 'Gray' \| 'Primary' \| 'Error' \| 'Warning' \| 'Success' \| 'Purple' \| 'Cyan' | 'Gray' | Color scheme for the badge | | size | 'xsm' \| 'sm' \| 'md' \| 'lg' | 'md' | Size variant of the badge | | dot | 'left' \| 'right' \| 'none' | 'none' | Position of optional dot indicator (left, right, or none) | | removable | boolean | false | Whether to show a remove button | | customClass| string | '' | Additional CSS classes for custom styling |

Outputs

Features

✅ Multiple Variants - Light, Solid, Outline, and Transparent styles
✅ Color Options - Gray, Primary, Error, Warning, Success, Purple, and Cyan
✅ Size Variants - Extra Small (xsm), Small (sm), Medium (md), Large (lg)
✅ Dot Indicators - Optional dot indicator on left or right side
✅ Removable - Optional remove button with click event
✅ Custom Styling - Additional CSS classes for custom appearance
✅ Event Handling - clicked event for remove button interactions

Usage Examples

Basic Badge:

import { BadgeComponent } from '@brickclay/ui';

@Component({
  template: `
    <brickclay-badge [label]="'New'" [color]="'Success'"> </brickclay-badge>
  `,
  imports: [BadgeComponent],
})
export class MyComponent {}

Different Variants:

<!-- Light variant -->
<brickclay-badge
  [label]="'Light Badge'"
  [variant]="'Light'"
  [color]="'Primary'">
</brickclay-badge>

<!-- Solid variant -->
<brickclay-badge
  [label]="'Solid Badge'"
  [variant]="'Solid'"
  [color]="'Primary'">
</brickclay-badge>

<!-- Outline variant -->
<brickclay-badge
  [label]="'Outline Badge'"
  [variant]="'Outline'"
  [color]="'Primary'">
</brickclay-badge>

<!-- Transparent variant -->
<brickclay-badge
  [label]="'Transparent Badge'"
  [variant]="'Transparent'"
  [color]="'Primary'">
</brickclay-badge>

Different Colors:

<brickclay-badge [label]="'Gray'" [color]="'Gray'"> </brickclay-badge>
<brickclay-badge [label]="'Primary'" [color]="'Primary'"> </brickclay-badge>
<brickclay-badge [label]="'Error'" [color]="'Error'"> </brickclay-badge>
<brickclay-badge [label]="'Warning'" [color]="'Warning'"> </brickclay-badge>
<brickclay-badge [label]="'Success'" [color]="'Success'"> </brickclay-badge>
<brickclay-badge [label]="'Purple'" [color]="'Purple'"> </brickclay-badge>
<brickclay-badge [label]="'Cyan'" [color]="'Cyan'"> </brickclay-badge>

Different Sizes:

<!-- Extra Small -->
<brickclay-badge [label]="'XSM'" [size]="'xsm'"> </brickclay-badge>

<!-- Small -->
<brickclay-badge [label]="'SM'" [size]="'sm'"> </brickclay-badge>

<!-- Medium -->
<brickclay-badge [label]="'MD'" [size]="'md'"> </brickclay-badge>

<!-- Large -->
<brickclay-badge [label]="'LG'" [size]="'lg'"> </brickclay-badge>

With Dot Indicators:

<!-- Dot on left -->
<brickclay-badge
  [label]="'Active'"
  [dot]="'left'"
  [color]="'Success'">
</brickclay-badge>

<!-- Dot on right -->
<brickclay-badge
  [label]="'Pending'"
  [dot]="'right'"
  [color]="'Warning'">
</brickclay-badge>

Removable Badge:

@Component({
  template: `
    <brickclay-badge
      [label]="'Removable Tag'"
      [removable]="true"
      (clicked)="onRemoveTag($event)">
    </brickclay-badge>
  `,
})
export class MyComponent {
  onRemoveTag(label: string) {
    console.log('Removed:', label);
    // Remove from list, update state, etc.
  }
}

Dynamic Badge List:

@Component({
  template: `
    <div>
      <brickclay-badge
        *ngFor="let tag of tags"
        [label]="tag"
        [removable]="true"
        [color]="getTagColor(tag)"
        (clicked)="removeTag(tag)">
      </brickclay-badge>
    </div>
  `,
})
export class MyComponent {
  tags = ['Angular', 'TypeScript', 'RxJS', 'NgRx'];

  removeTag(tag: string) {
    this.tags = this.tags.filter((t) => t !== tag);
  }

  getTagColor(tag: string): 'Primary' | 'Success' | 'Warning' {
    // Custom logic to determine color
    return 'Primary';
  }
}

With Custom Classes:

<brickclay-badge
  [label]="'Custom Styled'"
  [customClass]="'my-custom-class font-bold'">
</brickclay-badge>

Styling

The badge component supports predefined size classes:

Extra Small: xsm
Small: sm
Medium: md - Default
Large: lg

The component includes built-in styles for:

All variant styles (Light, Solid, Outline, Transparent)
All color schemes (Gray, Primary, Error, Warning, Success, Purple, Cyan)
Dot indicators (left and right positions)
Remove button styling
Hover states
Smooth transitions

📐 TypeScript Interfaces

CalendarRange

interface CalendarRange {
  start: Date;
  end: Date;
}

CalendarSelection

interface CalendarSelection {
  startDate: Date | null;
  endDate: Date | null;
  selectedDates?: Date[]; // For multi-date selection
}

TimeConfiguration

interface TimeConfiguration {
  date: Date;
  allDay: boolean;
  startTime: string; // Format: "HH:mm" or "HH:mm:ss"
  endTime: string;
}

ScheduledDateSelection

interface ScheduledDateSelection {
  mode: 'single' | 'multiple' | 'range';
  singleDate?: {
    startDate: Date;
    endDate: Date;
    allDay: boolean;
    startTime: string;
    endTime: string;
  };
  multipleDates?: TimeConfiguration[];
  dateRange?: {
    startDate: Date;
    endDate: Date;
    allDay: boolean;
    startTime: string;
    endTime: string;
  };
}

🎯 Common Use Cases

Form Integration

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomCalendarComponent } from '@brickclay/ui';

export class BookingFormComponent {
  bookingForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.bookingForm = this.fb.group({
      checkIn: [null, Validators.required],
      checkOut: [null, Validators.required],
    });
  }

  onDateSelected(selection: CalendarSelection) {
    this.bookingForm.patchValue({
      checkIn: selection.startDate,
      checkOut: selection.endDate,
    });
  }
}

Reactive Forms

<brickclay-custom-calendar
  [selectedValue]="form.get('dateRange')?.value"
  (selected)="form.patchValue({ dateRange: $event })">
</brickclay-custom-calendar>

Date Filtering

export class DataTableComponent {
  filterDates: CalendarSelection = { startDate: null, endDate: null };

  onDateFilter(selection: CalendarSelection) {
    this.filterDates = selection;
    this.loadFilteredData();
  }

  loadFilteredData() {
    const filtered = this.data.filter((item) => {
      if (!this.filterDates.startDate || !this.filterDates.endDate) {
        return true;
      }
      return item.date >= this.filterDates.startDate! && item.date <= this.filterDates.endDate!;
    });
  }
}

📦 Assets Configuration

The calendar components require SVG icons. Configure your angular.json to copy assets:

{
  "glob": "**/*",
  "input": "node_modules/@brickclay/ui/assets",
  "output": "assets"
}

Or manually copy assets from:

node_modules/@brickclay/ui/assets/calender/* → your-app/public/assets/calender/

🔧 Service

CalendarManagerService

A service that manages multiple calendar instances, ensuring only one calendar is open at a time when not in inline mode. Used internally by CustomCalendarComponent.

🌐 Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

📦 Dependencies

Angular 20.3.0+
moment (for date formatting)

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for more information.

📄 License

MIT

📞 Support

For issues, feature requests, or contributions, please visit our GitHub repository.

🗺️ Roadmap

[ ] Button components
[ ] Input components
[ ] Card components
[ ] Modal/Dialog components
[ ] Table components
[ ] Form components
[ ] Navigation components
[ ] Loading/Spinner components
[ ] Toast/Notification components
[ ] More calendar features

📝 Changelog

Version 0.0.1

Initial Release:

✅ Calendar component suite
- Single date selection
- Date range selection
- Multiple date selection
- Time picker integration
- Inline and dropdown modes
- Dual calendar view
- Custom date ranges
- Date constraints (min/max)
✅ Scheduled date picker component
✅ Standalone time picker component
✅ Toggle/Switch component
- Angular forms integration (ngModel & reactive forms)
- Three size variants (small, medium, large)
- Disabled state support
- Full accessibility features
- Customizable styling
✅ Checkbox component
- Angular forms integration (ngModel & reactive forms)
- Customizable styling via CSS classes
- Disabled state support
- Full keyboard navigation support
- Complete accessibility features
✅ Radio button component
- Angular forms integration (ngModel & reactive forms)
- Two visual variants (dot and tick)
- Radio group support
- Customizable styling via CSS classes
- Disabled state support
- Full keyboard navigation support
- Complete accessibility features
✅ Pill component
- Multiple visual variants (Light, Solid, Outline, Transparent)
- Seven color options (Gray, Primary, Error, Warning, Success, Purple, Cyan)
- Four size variants (xsm, sm, md, lg)
- Optional dot indicators (left, right, none)
- Removable functionality with click events
- Custom CSS class support
✅ Badge component
- Multiple visual variants (Light, Solid, Outline, Transparent)
- Seven color options (Gray, Primary, Error, Warning, Success, Purple, Cyan)
- Four size variants (xsm, sm, md, lg)
- Optional dot indicators (left, right, none)
- Removable functionality with click events
- Custom CSS class support
✅ TypeScript definitions
✅ Comprehensive documentation

Built with ❤️ by the Brickclay team

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@brickclay-org/ui

🌟 Features

📚 Available Components

Calendar Components

Toggle Component

Checkbox Component

Radio Component

Pill Component

Badge Component

Button Component

Icon Button Component

Button Group Component

Spinner Component

Installation

Peer Dependencies

Asset Configuration (Required)

Quick Start

Standalone Component Usage (Recommended)

Module-based Usage

📅 Calendar

Components Overview

CustomCalendarComponent

Basic Example

Component Selector

Inputs

Outputs

Usage Examples

ScheduledDatePickerComponent

Basic Example

Component Selector

Inputs

Outputs

Features

TimePickerComponent

Basic Example

Component Selector

Inputs

Outputs

Features

Time Format Examples

🔘 Toggle

ToggleComponent

Basic Example

Component Selector

Inputs

Outputs

Features

Usage Examples

Styling

Accessibility

☑️ Checkbox

CheckboxComponent

Basic Example

Component Selector

Inputs

Outputs

Features

Usage Examples

Styling

Accessibility

🔘 Radio Button

RadioComponent

Basic Example

Component Selector

Inputs

Outputs

Features

Usage Examples

Styling

Accessibility

Radio Groups

💊 Pill

PillComponent

Basic Example