Radix2Solid

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Label

Renders an accessible label associated with controls.
Download runnable sandbox
import { Label } from "@radix-solid/primitives";

import styles from "./styles.module.css";

const LabelDemo = () => <div style={{
  "display": "flex",
  "padding": "0 20px",
  "flex-wrap": "wrap",
  "gap": "15px",
  "align-items": "center"
}}>

		<Label.Root class={styles.Root} for="firstName">

			First name

		</Label.Root>

		<input class={styles.Input} type="text" id="firstName" defaultValue="Pedro Duarte" />

	</div>;

export default LabelDemo;

Features

  • Text selection is prevented when double clicking label.

  • Supports nested controls.

Anatomy

Import the component.

import { Label } from "@radix-solid/primitives";

export default () => <Label.Root />;

API Reference

Root

Contains the content for the label.

PropTypeDefault
asChildbooleanfalse
htmlForstring—

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.