Skip to content

feat(modal): add radio element support#292

Open
uttam12331 wants to merge 4 commits into
younisdev:mainfrom
uttam12331:feature/85-radio-element
Open

feat(modal): add radio element support#292
uttam12331 wants to merge 4 commits into
younisdev:mainfrom
uttam12331:feature/85-radio-element

Conversation

@uttam12331

Copy link
Copy Markdown
Contributor

Summary

Implements #85 — adds a new radio input type to the modal component.

<Modal
  title="Sign up"
  theme="Crimson"
  type="form"
  elements={[
    { type: 'text', name: 'fullName', placeholder: 'Full Name', amount: 1 },
    { type: 'radio', name: 'plan', placeholder: 'Choose a plan', options: ['Free', 'Pro', 'Enterprise'], amount: 1 }
  ]}
  onSubmit={(data) => console.log(data)}
/>

What changed

As outlined in the issue, all four touch-points are covered:

  • elements.json — registers the radio element (input tag, requires-options: true, radiogroup aria role).
  • constants.js — exposes DYVIX_MODAL_ELEMENT.RADIO (single line, matching the generator output).
  • modal.jsx — the options lookup now applies to any requires-options element (so it uniformly covers select, d-select and the new radio), plus a dedicated render branch that draws an accessible radio group: one <input type="radio"> per option sharing the field name, with checked bound to data[name] and selection written back through the existing handleInputChange flow.
  • elements.css — styles for the radio group, legend and inputs.

The selected option's value is stored in data[name] like any other field, so existing validation and submit logic work unchanged. Existing element types are unaffected.

Testing

  • Added a radio example to the devbench (devbench/src/component/modal.jsx).
  • npm run build -w devbench succeeds (96 modules transformed).
  • Prettier-clean across all changed files.

Closes #85

Add a new `radio` input type to the modal component. A radio field renders
its `options` as a single-selection group sharing one name; the selected
option's value is stored in `data[name]`.

- elements.json: register the `radio` element (`requires-options`, input
  tag, radiogroup aria role).
- constants.js: expose `DYVIX_MODAL_ELEMENT.RADIO`.
- modal.jsx: compute options for any `requires-options` element (covers
  select, d-select and radio) and render a dedicated accessible radiogroup
  with per-option labels and checked state bound to `data`.
- elements.css: styles for the radio group, legend and inputs.
- devbench: add a radio example.

Closes younisdev#85
@vercel

vercel Bot commented Jun 29, 2026

Copy link
Copy Markdown

@uttam12331 is attempting to deploy a commit to the younis' projects Team on Vercel.

A member of the Team first needs to authorize it.

@younisdev younisdev self-requested a review July 3, 2026 22:02
@vercel

vercel Bot commented Jul 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dyvix-ui Ready Ready Preview, Comment Jul 3, 2026 11:57pm

@younisdev younisdev left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, @uttam12331. I made a few CSS adjustments to create a compact inline layout for the radio element. However, allowing multiple radio groups in a single row doesn't fit the current design. Could you update InputValidation.jsx to prevent developers from adding more than one radio group? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Add radio element support for modal.

2 participants