npm i @velkin/react
import { VuRadioGroup } from "@velkin/react/radio-group";Tables match the member selected under Import.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | VuRadioGroupOrientation | "horizontal" | `horizontal` (default) wraps members; `vertical` stacks them. |
| legend | string | "" | Plain-text in-group caption (muted vs string label); use slot="legend" for markup. |
| label | string | "" | Plain-text field label above the group; use slot="label" for markup. |
| hint | string | "" | Plain-text helper under the group; use `slot="hint"` for markup. |
| ariaLabel | string | "" | Accessible name when there is no visible label or legend. |
| variant | VuRadioVariant | "default" | Forwarded to members that omit their own `variant`. |
| color | VuRadioColor | "primary" | Forwarded to members that omit their own `color`. |
| tone | VuRadioTone | "normal" | Forwarded to members that omit their own `tone`. |
| size | VuRadioSize | "md" | Forwarded to members that omit their own `size`. |
| name | string | — | Form field name forwarded to every member. Default: `""`. |
| defaultvalue | string | — | Value restored on `<form reset>` (`defaultvalue` attr). |
| formid | string | null | — | External `<form>` id (`formid` attr). |
| disabled | boolean | false | Disables every member while set (releases only attrs this group claimed). |
| readonly | boolean | false | Forwarded to members; blocks selection (inherited from `FormControlBase`). |
| required | boolean | false | When true, `checkValidity` / `reportValidity` fail until one member is selected. |
| requiredMessage | string | "This field is required." | Message for host `valueMissing` when `required` and nothing is selected. |
| compact | boolean | false | Tighter hint and error spacing. |
| showerrors | boolean | — | Shows validation after activation (`showerrors` attr). Default: `false`. |
| validationactive | boolean | — | Drives invalid styling after activation (`validationactive` attr). Default: `false`. |
| invalid | boolean | false | True when last validation found errors (`invalid` attr). Default: `false`. |
| value | undefined | string | undefined | Selected member `value`; set from JS to control selection. Omit to stay uncontrolled. |
| showErrors | boolean | false | Shows validation after activation. |
| validationActive | boolean | false | Drives invalid styling after activation. |
| Event | Detail | Description |
|---|---|---|
| vu-change | VuRadioGroupChangeDetail | After a member is selected; `detail.value` mirrors `value` when controlled. Fired on the group host (not the member). |
| vu-invalid | VuRadioGroupValidationErrorDetail | When validation messages are recomputed while `validationActive`. |
| Slot | Description |
|---|---|
| — | - One or more `<vu-radio>` members (other nodes are ignored for forwarding). |
| label | Rich field label; takes precedence over string `label` when assigned. |
| hint | Optional helper copy (HTML); overrides string `hint` when assigned. |
| error | Replaces default validation message list when assigned. |
| legend | Rich legend inside the group; takes precedence over string `legend` when assigned. |
| Part | Description |
|---|---|
| field | Column that stacks label, group, hint, and error. |
| label | Field label wrapper (string `label` or `label` slot). |
| text | String `label` when the `label` slot is empty. |
| base | `role="radiogroup"` wrapper (legend + default slot). |
| legend | In-group caption row; styled quieter than part label. |
| fields | Flex container around radios. |
| hint | Helper text region (string `hint` or `hint` slot). |
| error-message | Region for `slot="error"` or stacked default validation lines. |
| error-line | One default validation string when `slot="error"` is empty. |
| Method | Description |
|---|---|
| validateInput | - Runs validators and syncs validity. |
| Name | Definition |
|---|---|
| string | undefined | |
| VuRadioColor | |
| VuRadioGroupChangeDetail | |
| VuRadioGroupOrientation | |
| VuRadioGroupValidationErrorDetail | |
| VuRadioSize | |
| VuRadioTone | |
| VuRadioVariant | |