Label

import { Label } from "@uj-vilag/dap-components";

export default function LabelExample() {
  return (
    <div>
      <Label
        labelText="Username"
        helperText="Enter your username"
        requirement="required"
        tipText="This will be your unique identifier."
      />
    </div>
  );
}

import { Label } from "@uj-vilag/dap-components";

export default function Variants() {
  return (
    <div>
      <Label labelText="Default Label" />
      <Label labelText="Default Label disabled" disabled />
      <Label labelText="Subtle Label" variant="subtle" />
      <Label labelText="Subtle Label disabled" variant="subtle" disabled />
    </div>
  );
}

import { Label } from "@uj-vilag/dap-components";

export default function Sizes() {
  return (
    <div>
      <Label labelText="Large Label" size="large" />
      <Label labelText="Small Label" size="small" />
      <Label labelText="XSmall Label" size="xSmall" />
    </div>
  );
}

import { Label } from "@uj-vilag/dap-components";

export default function RequiredOptional() {
  return (
    <div>
      <Label labelText="Required Field" requirement="required" />
      <Label labelText="Optional Field" requirement="optional" />
      <Label
        labelText="Custom Optional Text"
        requirement="optional"
        optionalText="(Not Mandatory)"
      />
    </div>
  );
}

import { Label, TextField } from "@uj-vilag/dap-components";

export default function WithChildren() {
  return (
    <div>
      <Label
        labelText="Email"
        requirement="required"
        htmlFor="email-input"
        helperText="Please enter your email address."
      >
        <TextField
          placeholder="johndoe@example.com"
          id="email-input"
          aria-describedby="email-input-helperText"
          required
        />
      </Label>
    </div>
  );
}

import { Checkbox, CheckboxGroup, Label } from "@uj-vilag/dap-components";

export default function EmailPreferences() {
  return (
    <Label
      labelText="Email Preferences"
      mode="legend"
      helperText="Select your preferences"
      className="gap-dap-400"
    >
      <CheckboxGroup>
        <Checkbox background defaultChecked={true} id="product-updates">
          <Label
            labelText="Send me product updates"
            variant="subtle"
            htmlFor="product-updates"
          />
        </Checkbox>
        <Checkbox background id="promotional-offers">
          <Label
            labelText="Send me promotional offers"
            variant="subtle"
            htmlFor="promotional-offers"
          />
        </Checkbox>
      </CheckboxGroup>
    </Label>
  );
}