Skip to main content
Version: 3.0.0-beta

Label

The Label component is a simple and versatile component used to display text content with a label style. You usually use it to display a label for an input field, like a checkbox, or radio button.

Usage

To use the Label component, import it from your components. You can pass a border prop to add a border around the label. You can also pass any of the HTML label props, such as htmlFor, className, and style.

Label with a Checkbox

Simple example of using the Label component to create a basic surface for content.

import React from "react";
import { Checkbox, Label } from "@firecms/ui";

export default function LabelCheckboxDemo() {

const [checked, setChecked] = React.useState(false);

return (
<Label
border={true}
className="cursor-pointer p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
htmlFor="my-filter"
>
<Checkbox id="my-filter"
checked={checked}
size={"small"}
onCheckedChange={setChecked}/>
Filter for null values
</Label>
);
}

Label with a Radio Button

This is an example of using the Label component with a radio button.

import React from "react";
import { Label, RadioGroup, RadioGroupItem } from "@firecms/ui";

export default function LabelRadioButtonDemo() {
return (
<div className={"flex flex-col gap-2"}>
<Label className="text-base" htmlFor="color">
Color
</Label>
<RadioGroup className="flex flex-col gap-2" defaultValue="black" id="color">
<Label
border={true}
className="cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
htmlFor="color-black"
>
<RadioGroupItem id="color-black" value="black"/>
Black
</Label>
<Label
border={true}
className="cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
htmlFor="color-white"
>
<RadioGroupItem id="color-white" value="white"/>
White
</Label>
<Label
border={true}
className="cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
htmlFor="color-blue"
>
<RadioGroupItem id="color-blue" value="blue"/>
Blue
</Label>
</RadioGroup>
</div>
);
}
Sign up to our newsletter to get the latest news and updates. No spam!