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>
Alert state
Display red text only after an invalid form submission has been
attempted.
<Feedback state="alert">Something went wrong!</Feedback>
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
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>
</>
);
}
