Label

Standalone label

Don't use this component with bifrost input components like <Input>, <DatePicker>, <TextArea>, <Checkbox>, and <Select>, since they already supply a label through their label prop.

If you want to label a group of inputs, radio buttons or a button group, use <fieldset> and <legend className='bf-label'> styled as a label instead. See demo at Forms guide.

<Label>Label</Label>
<Label required>Label</Label>
<Label optional>Label</Label>
<Label disabled>Disabled</Label>
<Label>Label</Label>
<Label required>Label</Label>
<Label optional>Label</Label>
<Label disabled>Disabled</Label>

With an icon

You can nest <Icon> (or any other JSX) inside the label.

<Label>
  <Icon icon={faHeart} marginRight />
  Label
</Label>
<Label>
  <Icon icon={faHeart} marginRight />
  Label
</Label>

Figma Label component

The Label component in Figma has an optional "Value" and an optional "helpertext" while our react component only renders a single <label> element.

You can create something with the same appearance easily enough by using the .bf-label-description class for the "helpertext", while the "Value" already is the default text color.

<div className="bf-autocol">
  <div>
    <Label>Label Title</Label>
    <div>Value</div>
  </div>
  <div>
    <Label>Label Title</Label>
    <div className="bf-label-description">This is a helpertext</div>
    <div>Value</div>
  </div>
</div>
<div className="bf-autocol">
  <div>
    <Label>Label Title</Label>
    <div>Value</div>
  </div>
  <div>
    <Label>Label Title</Label>
    <div className="bf-label-description">This is a helpertext</div>
    <div>Value</div>
  </div>
</div>

Connect with a custom input

This is not needed when using our <Input> component which has its own label prop already connected.

Supply an input id to the htmlFor prop to connect it to an input field. This lets screen readers know what label to read when the input receives focus (and clicks on the label focuses its associated input).

import Label from "@intility/bifrost-react/Label";

export default function () {
  return (
    <>
      <Label htmlFor="uniqueId">Name</Label>
      <input id="uniqueId" type="text" className="bf-input" />
    </>
  );
}

Sandbox

import Label from "@intility/bifrost-react/Label";
import Icon from "@intility/bifrost-react/Icon";
import AutoCol from "@intility/bifrost-react/AutoCol";
import { faHeart } from "@fortawesome/free-regular-svg-icons";

export default function () {
  return (
    <AutoCol>
      <div>
        <Label>
          <Icon icon={faHeart} marginRight />
          Label Title
        </Label>
        <div className="bf-label-description">This is a helpertext</div>
        <div>Value</div>
      </div>
      <div>
        <Label required htmlFor="anotherUniqueId">
          <Icon icon={faHeart} marginRight />
          Label Title
        </Label>
        <div className="bf-label-description">This is a helpertext </div>
        <input required id="anotherUniqueId" type="text" className="bf-input" />
      </div>
    </AutoCol>
  );
}