Getting started

A quick tutorial to get you up and running with Radix Primitives.

Implementing a Label

In this quick tutorial, we will install and style the Label primitive.

1. Install the primitive package

Terminal window
npm install @radix-ng/primitives @angular/cdk

2. Import the parts

Import and structure the parts.

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';


import 'zone.js';


import { RdxLabelRootDirective } from '@radix-ng/primitives/label';


@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RdxLabelRootDirective],
    template: `
        <h1>Hello from {{ name }}!</h1>
        <a target="_blank" href="https://angular.dev/overview">Learn more about Angular</a>
        <div>
            <label LabelRoot htmlFor="uniqId">First Name</label>
            <input type="text" class="Input" id="uniqId" />
        </div>
    `
})
export class App {
    name = 'Angular';
}


bootstrapApplication(App);

3. Add your styles

Add styles where desired.

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RdxLabelRootDirective],
    template: `
        <h1>Hello from {{ name }}!</h1>
        <a target="_blank" href="https://angular.dev/overview">Learn more about Angular</a>
        <div>
            <label LabelRoot class="Label" htmlFor="uniqId">First Name</label>
            <input type="text" class="Input" id="uniqId" />
        </div>
    `,
    styles: `
        .Label {
            color: white;
            font-size: 15px;
            line-height: 35px;
            font-weight: 500;
        }
    `
})

Summary

The steps above outline briefly what’s involved in using a Radix Primitive in your application.

These components are low-level enough to give you control over how you want to wrap them. You’re free to introduce your own high-level API to better suit the needs of your team and product.

In a few simple steps, we’ve implemented a fully accessible Popover component, without having to worry about many of its complexities.

  • Adheres to WAI-ARIA practices names-and-descriptions.
  • Can be controlled or uncontrolled.
  • Customize side, alignment, offsets, collision handling.
  • Optionally render a pointing arrow.
  • Focus is fully managed and customizable.
  • Dismissing and layering behavior is highly customizable.