npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@axa-ch/radio

v5.0.11

Published

The radio-button component for the AXA Pattern Library

Downloads

712

Readme

Radio

Radio buttons provide a UI element for selecting one out of several visible choices. One may label them with text to explain the semantics of the selected choice to users.

Radio buttons can be used in HTML forms as well as React controlled components.

For grouping multiple related radio buttons in a style-guide-conformant fashion see <axa-fieldset>.

Properties

button

The Boolean attribute button, when true, changes the radio button UI to a button-like appearance (default: false).

checked

The Boolean attribute checked controls whether the radio button is selected (true) or not (false).

If checked is defined when first set under React, controlled-component mode is activated.

disabled

The Boolean attribute disabled controls whether the radio button can be user-modified (false) or not (true).

A disabled radio button will not be submitted in a form.

refId

The string-valued refId sets the id attribute of the component's hidden <input>.

value

The string-valued value sets the value attribute of underlying <input type="radio">.

It is especially useful in combination with form submission of the component.

name

The string-valued name sets the name attribute of underlying <input type="radio">.

It serves as the group identifier of all N same-named radio buttons that collectively exhibit one-out-N-choice behaviour.

It is a necessary attribute for form submission of the component.

label

The string-valued label sets the visible text of this radio button (default: '').

nogap

The Boolean nogap attribute, when true, suppresses the horizontal gap between this radio button and its left neighbour in conjunction with an enclosing <axa-fieldset horizontal>.

It is intended for two-radio-button choices.

noAutoWidth

The Boolean noAutoWidth attribute, when true, suppresses the auto-width calculation for button-type radio buttons.

icon

The string-valued icon attribute receives a valid SVG icon with working dimensions 48×48 pixels.

Callbacks

onChange

The function-valued onChange can be used as a callback prop for React and other frameworks. Its only parameter is the native change event object from the underlying <input type="radio">.

The callback is invoked whenever the change event from the underlying <input type="radio"> fires.

It is especially important in controlled-component mode.

onFocus, onBlur

The function-valued onFocus, onBlur can be used as a callback prop for React and other frameworks. Its only parameter in each case is the native focus, blur event object from the underlying <input type="radio">.

The respective callbacks are invoked whenever the underlying <input type="radio"> receives or loses focus.