rio-labs/rio

Add `RadioButtons`

Opened this issue · 3 comments

Description

RadioButtons are a type of user interface element that allows users to select one option from a predefined set of options. Unlike checkboxes, which allow for multiple selections, RadioButtons ensure that only one option can be selected at a time. This feature is essential for forms where a single choice is required, such as selecting a payment method, choosing a subscription plan, or specifying a preferred contact method.

Design Guidline

https://m3.material.io/components/radio-button/overview

Suggested Solution

Basic Functionality:

  • Selecting a different RadioButton deselects the currently selected one.
  • Ensure only one RadioButton can be selected at a time within a group.
  • Ensure RadioButtons are keyboard navigable.
  • Support both horizontal and vertical alignment of RadioButtons.
  • Include labels next to each RadioButton for clarity.
  • Allow developers to group RadioButtons easily.
RadioButton(
   options: Mapping[str, T] | Sequence[T],
   header: str = '', # or something similar?
   selected_value: T | None = None
   orientation: Literal["horizontal", "vertical"] = "horizontal",
   is_sensitive: bool = True,
   is_valid: bool = True,
   ...
)

Essentially, it functions like a Dropdown?

Alternatives

No response

Additional Context

No response

Related Issues/Pull Requests

No response

@Sn3llius please assign me :)
i think i will start from the design and after confirmation i will start coding.

@Nirajan1-droid hey how are you doing? Feel free to ask if you need any help 👍

ok sure