Label

Renders an accessible label associated with controls.

import { Component } from '@angular/core';

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

@Component({
    selector: 'primitive-label-demo',
    standalone: true,
    imports: [RdxLabelDirective],
    template: `
        <label class="LabelRoot" rdxLabel htmlFor="firstName">First Name</label>
        <input class="Input" id="firstName" type="text" value="Pedro Duarte" />
    `,
    styleUrl: 'label-demo.css'
})
export class LabelDemoComponent {}

:host {
    input {
        all: unset;
    }
}

.Input {
    width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0 10px;
    margin-left: 10px;
    height: 35px;
    font-size: 15px;
    line-height: 1;
    color: white;
    background-color: var(--black-a2);
    box-shadow: 0 0 0 1px var(--black-a6);
}

.Input:focus {
    box-shadow: 0 0 0 2px black;
}

.Input::selection {
    background-color: var(--black-a6);
    color: white;
}

.LabelRoot {
    color: white;
    font-size: 15px;
    font-weight: 500;
    line-height: 35px;
}

Features

Text selection is prevented when double-clicking label.

Installation

Get started with importing the directive:

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

Anatomy

Import all parts and piece them together.

<label rdxLabel htmlFor="firstName">First Name</label>

API Reference

Label

RdxLabelDirective

Prop	Type	Default
`htmlFor`	`InputSignal<string>`	`input<string>('')`
`id`	`InputSignal<string>`	input<string>(`rdx-label-${idIterator++}`)

Accessibility

This component is based on the native label element, it will automatically apply the correct labelling when wrapping controls or using the htmlFor attribute. For your own custom controls to work correctly, ensure they use native elements such as button or input as a base.