Label

Variants

Default

The Label component is used to associate a text label with a form input element, helping improve accessibility and user experience. The size prop allows you to adjust the label size based on the form's design requirements.

<label
  for="input-id"
  class="gi-text-md gi-mb-1 gi-block">
  Label Text
</label>

{{ govieLabel({
  "content": "Label Text",
  "size": "md",
  "for": "input-id"
}) }}

import { Label } from "@govie-ds/react";

<Label
  htmlFor="input-id"
  size="md"
  text="Label"
/>

Usage

Best Practices

When to Use This Component

• Form Labels: Use this component whenever you need to label form elements like text inputs, dropdowns, checkboxes, or radio buttons to improve accessibility and usability.

• Responsive Text: Use the size prop to control the text size, making it larger or smaller based on the context of the form or layout.

• Accessibility: The htmlFor prop ensures the label is properly associated with the corresponding input element, which improves accessibility for users who rely on screen readers.

When Not to Use This Component

• Standalone Text: If you need a simple text element that’s not associated with a form control, use a standard text component rather than Label.

• Non-Label Content: If the element you are wrapping isn’t directly connected to an input (e.g., a non-interactive description), consider using a span, p, or another semantic element instead of Label.

Status