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

# Label

Renders an accessible label associated with controls.

## Features

- Text selection is prevented when double clicking label.

- Supports nested controls.

## Anatomy

Import the component.

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

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

## API Reference

### Root

Contains the content for the label.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `htmlFor`The id of the element the label is associated with.                                                                                                            | `string`  | —       |

## 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.