Bifrost Design System

Feedback

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

Feedback

Props

Display feedback for a group of inputs, radio buttons or a button group.

No need for this component with bifrost input components like <Input>, <DatePicker>, <TextArea>, <Select> and <FieldGroup>, since they already have feedback prop.

Basic example

<Feedback>Feedback text</Feedback>

Feedback text

Alert state

Display red text only after an invalid form submission has been attempted.

<Feedback state="alert">Something went wrong!</Feedback>

Something went wrong!

Avoid jumping UI

Feedback text is often not meant to be displayed permanently, but pop up when or if necesarry.

Conditionally rendering means the rest of the page will be pushed down when the text appears.

We can avoid this by making space for the text by passing in an empty string ("") as children when there is no feedback text to display:

<Feedback>{""}</Feedback>

Checkbox example

Pizza toppings

Pepperoni

Jalapeños

Nduja

Pineapple

Select at least 1 pizza topping

Rest of the page should not move when feedback text appears.

Sandbox

Open Sandbox

import Checkbox from "@intility/bifrost-react/Checkbox";
import Feedback from "@intility/bifrost-react/Feedback";
import { useState } from "react";

const toppings = ["Pepperoni", "Jalapeños", "Nduja", "Pineapple"] as const;
type Topping = (typeof toppings)[number];

export default function CheckboxFeedbackDemo() {
  const [selectedToppings, setSelectedToppings] = useState<Topping[]>([]);

  return (
    <>
      <fieldset className="bf-fieldset" aria-describedby="feedback-element">
        <legend className="bf-label">Pizza toppings</legend>
        {toppings.map((topping) => (
          <div key={topping}>
            <Checkbox
              label={topping}
              checked={selectedToppings.includes(topping)}
              onChange={(e) => {
                if (e.target.checked) {
                  setSelectedToppings((t) => [...t, topping]);
                } else {
                  setSelectedToppings((t) => t.filter((x) => x !== topping));
                }
              }}
            />
          </div>
        ))}
        <Feedback id="feedback-element">
          {selectedToppings.length === 0
            ? "Select at least 1 pizza topping"
            : ""}
        </Feedback>
      </fieldset>
      <p>Rest of the page should not move when feedback text appears.</p>
    </>
  );
}