ui · 18 variants · 3 categories
Form Field
Composed wrapper around any control with FormLabel + FormHelper + FormError slots. Replaces standalone form-label, helper-text and error-message — six variants for each slot.
npx "@rueda.dev/gems-diamond" add form-fieldLabel
6 variantsclassicrequiredmonobadgetagsaccentHelper
6 variantsWe never share your email.
subtleTip: paste from clipboard.
infoInternal handle only
commentCharacters 24/280
counterUse lowercase only.
boxPress Tab to jump fields.
tipError
6 variantsEmail is required.
iconInvalid format.
x-markCould not save changes.
bannerbadgeTry again later.Try again later.
tickedSchema mismatch.ERR_SCHEMA
codeUsage Guide
How to wire up this component in your app — props, callbacks, customization, and the conventions Diamond shares across the library.
Universal patterns
Every Diamond component shares the same prop conventions, so once you learn one you can predict the others.
variant— discriminated union of every visual option. Categories shown above are docs-only metadata; the prop is a flat string union.accent— any CSS color string. Overrides--diamond-accentjust for that instance via inlinestyle. Cascades into hover, ring, and selection states.asChild(when present) — renders the underlying primitive via@radix-ui/react-slot, letting you compose with<Link>,motion.button, etc.className— merged with internal Tailwind classes viacn(). Use it to override layout, spacing, or colors.- Native HTML attributes (
onClick,aria-*,data-*,ref, etc.) flow through to the root element without any whitelist. - Diamond is the skin: zero domain state, zero fetch, zero providers. You wire data and reactions in your app code; the components just render and emit events.