Radio Item

Radio Item

Overview

The RadioItem component is a custom React component designed to render a radio button with enhanced user experience features, including audio feedback on interactions. This component is ideal for forms or settings where a single selection from multiple options is required.

Installation

To use the RadioItem component in your React project, import it as follows:

const { RadioItem } = window.$_gooee.framework;

Usage

The RadioItem component is used to display a single radio button. It is typically used as part of a group of radio buttons where only one can be selected at a time. It supports custom styling and provides an audio feedback feature for interactions like hover and click.

Props

The RadioItem component accepts the following props:

• className: Additional CSS class names to apply to the radio button.
• style: CSS styles to apply to the radio button.
• checked: Boolean indicating whether the radio button is checked.
• onToggle: Function to be called when the radio button is toggled. It receives the new checked state as an argument.

Functionalities

• State Management: Manages its checked state internally and syncs with the checked prop.
• Custom Styling: Can be styled via CSS classes and inline styles.
• Audio Feedback: Provides audio feedback for interactions using the engine.trigger method.

Styling

The component uses the following CSS classes:

• form-radio-input: The base class for the radio button.
• checked: Applied when the radio button is checked.
• Additional classes can be applied via the className prop.

Interaction

• The radio button changes its state upon clicking.
• Audio feedback is played on hover and click events.

Examples

Basic RadioItem

<RadioItem checked={true} onToggle={(newChecked) => console.log(newChecked)} />

Custom Styled RadioItem

<RadioItem className="custom-class" style={{ color: 'blue' }} checked={false} onToggle={(newChecked) => console.log(newChecked)} />

Contributing

Contributions to improve the RadioItem component are welcomed. Follow the project's contribution guidelines for submitting bug fixes, feature requests, or enhancements.