Radio Button Filter

Radio button filter is used to show or hide HTML elements depending on their path, value and user selection.

<label>
    <input
        type="radio"
        name="my-radio"
        data-grid-control="radio-filter"
        data-path=".color-red"
    /> Red
</label>

<label>
    <input
        type="radio"
        name="my-radio"
        data-grid-control="radio-filter"
        data-path=".color-blue"
    /> Blue
</label>

<label>
    <input
        type="radio"
        name="my-radio"
        data-grid-control="radio-filter"
        data-path=""
    /> All
</label>

Data Attribute	Value	Description	Required
data-grid-control	radio-filter	This attribute defines the control type.	Required
data-path	any CSS selector	It defines the path to the item that should be filtered.	Optional
data-inverted	false (default), true	This attribute inverts the filter.	Optional
checked	​Content	A Boolean attribute indicating whether or not this radio button is checked by default.	Optional

If the data-value attribute is specified, the filter will look for this text value in the provided data-path. In this case, the following data attributes may be specified:

Data Attribute	Value	Description	Required
data-value	any text	The filter will look for this text in the given data-path	Optional
data-mode	contains startsWith endsWith equal	Filter mode. The default value is "equal".	Optional
data-skip	[^a-zA-Z0-9]+	Defines a regex of characters that should be skipped.	Optional

In radio button path filter control, the name attribute is used instead of data-id attribute.