FORMS · COMPONENT
Chip
Keep selected tags visible and easy to remove.
The preview couldn’t load. Try Reset preview, or open Code to use the example.
Loading the real component…
"use client";
import { useState } from "react";
import { Chip, Button } from "@raydenui/ui";
import "@raydenui/ui/styles.css";
const initial = ["Brand design", "Research", "Prototyping"];
export default function Example({ state = "default" }: { state?: string }) {
const [tags, setTags] = useState(initial);
return <div style={{ width: "min(100%, 480px)", display: "grid", gap: 24 }}><h2 style={{ fontSize: 24 }}>Keep the right things in view.</h2><div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>{tags.map(tag => <Chip key={tag} disabled={state === "disabled"} onClose={() => setTags(tags.filter(value => value !== tag))}>{tag}</Chip>)}</div><p role="status">{tags.length} project tags selected.</p><div><Button variant="secondary" onClick={() => setTags(initial)}>Restore tags</Button></div></div>;
}
Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.
Made for real interfaces.
A controlled set of input chips represents project tags. Removing a chip updates the selected count; Restore tags returns the initial set.
Try it
Remove a tag and restore the set. In the disabled state, removal is unavailable.