Label

Il componente Label è un componente semplice e versatile usato per visualizzare contenuto testuale con uno stile di etichetta. Di solito lo si usa per visualizzare un’etichetta per un campo di input, come una casella di controllo o un pulsante radio.

Utilizzo

Per usare il componente Label, importalo dai tuoi componenti. Puoi passare una prop border per aggiungere un bordo attorno all’etichetta. Puoi anche passare qualsiasi prop HTML label, come htmlFor, className e style.

Label con una casella di controllo

Semplice esempio di utilizzo del componente Label per creare una superficie di base per il contenuto.

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-surface-100 dark:[&:has(:checked)]:bg-surface-800"
            htmlFor="my-filter"
        >
            <Checkbox id="my-filter"
                      checked={checked}
                      size={"small"}
                      onCheckedChange={setChecked}/>
            Filter for null values
        </Label>
    );
}

Label con un pulsante radio

Questo è un esempio di utilizzo del componente Label con un pulsante radio.

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-surface-100 dark:[&:has(:checked)]:bg-surface-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-surface-100 dark:[&:has(:checked)]:bg-surface-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-surface-100 dark:[&:has(:checked)]:bg-surface-800"
                    htmlFor="color-blue"
                >
                    <RadioGroupItem id="color-blue" value="blue"/>
                    Blue
                </Label>
            </RadioGroup>
        </div>
    );
}