Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@material/radio
Advanced tools
@material/radio is a Material Design radio button component for the web. It provides a set of customizable radio buttons that adhere to the Material Design guidelines, ensuring a consistent and visually appealing user interface.
Basic Radio Button
This code sample demonstrates a basic radio button using the @material/radio package. It includes the necessary HTML structure and CSS classes to create a Material Design radio button.
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="radio-1">Radio 1</label>
</div>
Disabled Radio Button
This code sample shows how to create a disabled radio button using the @material/radio package. The 'disabled' attribute is added to the input element to make the radio button non-interactive.
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-2" name="radios" disabled>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="radio-2">Radio 2 (Disabled)</label>
</div>
Custom Styling
This code sample demonstrates how to apply custom styling to a radio button using the @material/radio package. Custom CSS is used to change the color of the radio button's outer circle and inner circle.
<style>
.custom-radio .mdc-radio__background {
border-color: #ff5722;
}
.custom-radio .mdc-radio__inner-circle {
background-color: #ff5722;
}
</style>
<div class="mdc-form-field custom-radio">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-3" name="radios">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="radio-3">Custom Styled Radio</label>
</div>
react-radio-group is a React component for creating radio button groups. It provides a simple API for managing radio button states and is highly customizable. Unlike @material/radio, which is based on Material Design guidelines, react-radio-group is more flexible in terms of styling and can be used in various design systems.
Ant Design (antd) is a comprehensive UI library for React that includes a set of high-quality components, including radio buttons. The radio buttons in antd are highly customizable and come with built-in support for themes and internationalization. Compared to @material/radio, antd offers a broader range of components and is designed for enterprise-level applications.
semantic-ui-react is the official React integration for Semantic UI. It provides a set of components, including radio buttons, that follow the Semantic UI design principles. The radio buttons in semantic-ui-react are easy to use and integrate well with other Semantic UI components. Unlike @material/radio, which follows Material Design guidelines, semantic-ui-react follows the Semantic UI design language.
The MDC Radio Button component provides a radio button adhering to the Material Design Specification. It requires no Javascript out of the box, but can be enhanced with Javascript to provide better interaction UX as well as a component-level API for state modification.
npm install --save @material/radio
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label id="radio-1-label" for="radio-1">Radio 1</label>
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-2" name="radios">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label id="radio-2-label" for="radio-2">Radio 2</label>
TODO(TK): Talk about
mdc-form-field
here.
<div class="mdc-radio mdc-radio--disabled">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" disabled>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label id="radio-1-label" for="radio-1">Disabled Radio 1</label>
Note that mdc-radio--disabled
is necessary on the root element in order to avoid having the ripple
elements intercept pointer events when using JS. When using the CSS-only variation, this is also
necessary to prevent hover states from activating.
MDC Radio ships with Component / Foundation classes which provide enhanced interaction UX via mdc-ripple, as well as APIs for programmatically altering the radio's state.
import {MDCRadio, MDCRadioFoundation} from '@material/radio';
const mdcRadio = require('mdc-radio');
const MDCRadio = mdcRadio.MDCRadio;
const MDCRadioFoundation = mdcRadio.MDCRadioFoundation;
require(['path/to/mdc-radio'], mdcRadio => {
const MDCRadio = mdcRadio.MDCRadio;
const MDCRadioFoundation = mdcRadio.MDCRadioFoundation;
});
const MDCRadio = mdc.radio.MDCRadio;
const MDCRadioFoundation = mdc.radio.MDCRadioFoundation;
If you do not care about retaining the component instance for the radio, simply call attachTo()
and pass it a DOM element.
mdc.radio.MDCRadio.attachTo(document.querySelector('.mdc-radio'));
Radios can easily be initialized using their default constructors as well, similar to attachTo
.
import {MDCRadio} from '@material/radio';
const radio = new MDCRadio(document.querySelector('.mdc-radio'));
Similar to regular DOM elements, the MDCRadio
functionality is exposed through accessor
methods.
Boolean. Proxies to the foundation's isChecked
/setChecked
methods when retrieved/set
respectively.
Boolean. Proxies to the foundation's isDisabled/setDisabled
methods when retrieved/set
respectively.
String. Proxies to the foundation's getValue/setValue
methods when retrieved/set
respectively.
Since MDC Radio is primarily driven by its native control, the adapter API is extremely simple.
Method Signature | Description |
---|---|
getNativeControl() => HTMLInputElement? | Returns the native radio control, if available. Note that if this control is not available, the methods that rely on it will exit gracefully. |
addClass(className: string) => void | Adds a class to the root element. |
removeClass(className: string) => void | Removes a class from the root element. |
Returns the value of adapter.getNativeControl().checked
. Returns false
if getNativeControl()
does not return an object.
Sets the value of adapter.getNativeControl().checked
. Does nothing if getNativeControl()
does
not return an object.
Returns the value of adapter.getNativeControl().disabled
. Returns false
if getNativeControl()
does not return an object.
Sets the value of adapter.getNativeControl().disabled
. Also adds/removes the mdc-radio--disabled
class based whether or not disabled
is true. Gracefully handles the absence of a return value of
getNativeControl()
.
Returns the value of adapter.getNativeControl().value
. Returns null
if getNativeControl()
does not return an object.
Sets the value of adapter.getNativeControl().value
. Does nothing if getNativeControl()
does
not return an object.
MDC Radios use the theme's primary color by default for on states, and are completely dark theme aware.
In browsers that fully support CSS variables, MDC Radio references CSS variables wherever theme properties are used.
However, due to Edge's buggy CSS variable support, the background-color
for .mdc-radio__background::before
will not honor CSS variables in Edge.
This means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.
FAQs
The Material Components for the web radio component
The npm package @material/radio receives a total of 324,297 weekly downloads. As such, @material/radio popularity was classified as popular.
We found that @material/radio demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.