Overview

Renders a label in an accessible form, with its respective controls.

Preview

Example

Code

import { Label } from "@inpulse-ui/label";

export function Demo() {
  return (
    <Label for="example">
      Exemple
    </Label>
  );
}

About

This component is a slight expansion of the Label developed and maintained by Radix UI.

It is based on the native label element, it will automatically apply the correct labelling when wrapping controls or using the for attribute.

Installation

pnpm

pnpm add @inpulse-ui/label

bun

bun add @inpulse-ui/label

yarn

yarn add @inpulse-ui/label

npm

npm install @inpulse-ui/label

API Reference

Root

Contains the content for the label.

Prop	Type	Default Value	Required
asChild	boolean	false	No
for	string	-	Yes
size	enum	xssmmdlgxl	No
value	string	-	No

Usage

The for property should reflect the name of the field that the Label is related to. It will not be rendered in the DOM if for property is not provided.

<Label for="example">Example</Label>

Examples

Using children

This is the default application, which allows greater possibilities by accepting any content, including JSX elements.

Preview

Example

Code

import { Label } from "@inpulse-ui/label";

export function Demo() {
  return (
    <Label for="example">
      Children Exemple
    </Label>
  );
}

Using value

This application is optional and only accepts string.

Preview

Example

Code

import { Label } from "@inpulse-ui/label";

export function Demo() {
  return (
    <Label for="example" value="Value Exemple" />
  );
}

Sizes

The label component supports the following sizes: xs, sm, md, lg.

Preview

ExampleExampleExampleExample

Code

import { Label } from '@inpulse-ui/label';

export function Demo() {
  return (
    <>
      <Label for="example" size="xs">Label</Label>
      <Label for="example" size="sm">Label</Label>
      <Label for="example" size="md">Label</Label>
      <Label for="example" size="lg">Label</Label>
    </>
  );
}