Label
Renders an accessible label associated with controls.
Loading...
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 | Default | Type |
---|---|---|
htmlFor | false | InputSignal<string> The id of the element the label is associated with. |
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.