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 |
| 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.Last modified 2yr ago