Fix radix radio cards component

[emmakodes]

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

New Feature Submission:

• Does your submission pass the tests?
• Have you linted your code locally prior to submission?

Changes To Core Features:

• Have you successfully ran tests with your changes locally?

Commit Description

Fix radix radio cards component

• added default_value, value, disabled, required, orientation, dir, loop , on_value_change , and name props to RadioCards.Root
• added as_child, value, disabled, and required props to RadioCards.Item
  Fixes Wrap Radix Radio Cards (New Component) #3411

Here is a working code of the component:

import reflex as rx

class FormState(rx.State):
    form_data: dict = {}

    def handle_submit(self, form_data: dict):
        """Handle the form submit."""
        self.form_data = form_data


def index() -> rx.Component:
    return rx.container(
                rx.vstack(
                    rx.form(
                        rx.vstack(
                            rx.input(
                                placeholder="First Name",
                                name="first_name",
                            ),
                            rx.flex(
                                    rx.radio_cards.root(
                                        rx.radio_cards.item(
                                            rx.text(
                                                "4-core CPU 16GB RAM"
                                            ),
                                            value="1",
                                        ),
                                        rx.radio_cards.item(
                                            rx.text(
                                                "6-core CPU 24GB RAM"
                                            ),
                                            value="2",
                                        ),
                                        rx.radio_cards.item(
                                            rx.text(
                                                "8-core CPU 32GB RAM"
                                            ),
                                            value="3",
                                        ),
                                        default_value="1",
                                        columns="3",
                                        size="1",
                                        name="myradiocard"
                                    ),
                                    align_items="center",
                                    justify_content="center",
                                    gap="3"
                            ),
                            rx.button("Submit", type="submit"),
                        ),
                        on_submit=FormState.handle_submit,
                        reset_on_submit=True,
                    ),
                    rx.divider(),
                    rx.heading("Results"),
                    rx.text(FormState.form_data.to_string())
                )
            )


app = rx.App(
    theme=rx.theme(
        appearance="light",
        has_background=True,
        radius="large",
        accent_color="teal"
    )
)
app.add_page(index)

radiocardviddemo.mp4