Components
Loading preview...
HeroUI v3 ErrorMessage — form validation message that appears when a field group is invalid, shown under a TagGroup with selection validation.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-error-message"use client"
import type { Key } from "@heroui/react"
import { ErrorMessage } from "@/components/ui/heroui-error-message"
import { Description, Label, Tag, TagGroup } from "@heroui/react"
import { useMemo, useState } from "react"
export default function ErrorMessageBasic() {
const [selected, setSelected] = useState<Iterable<Key>>(new Set())
const isInvalid = useMemo(() => Array.from(selected).length === 0, [selected])
return (
<TagGroup
selectedKeys={selected}
selectionMode="multiple"
onSelectionChange={(keys) => setSelected(keys)}
>
<Label>Required Categories</Label>
<TagGroup.List>
<Tag id="news">News</Tag>
<Tag id="travel">Travel</Tag>
<Tag id="gaming">Gaming</Tag>
<Tag id="shopping">Shopping</Tag>
</TagGroup.List>
<Description>Select at least one category</Description>
<ErrorMessage>{!!isInvalid && <>Please select at least one category</>}</ErrorMessage>
</TagGroup>
)
}