Radio¶
Groups of components that are responsible for rendering a html radio control with some additional content. The root components is <h-radio>, it wraps whole form control, for specific control parts we have a specialized component as:
- h-radio-content
- h-radio-control
The root element has a radio class.
Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.
Example¶
<h-radio
controlid="firstname"
controlname="firstname"
disabled="true"
class="radio radio_disabled">
<h-radio-control class="radio__control">
<input
type="radio"
class="radio__input"
id="firstname"
name="firstname"
disabled="">
<label
class="radio__label"
for="firstname"></label>
</h-radio-control>
<h-radio-content class="radio__content">
<label
class="label"
for="firstname">
<span>label</span>
</label>
<div class="radio__description">
<p>some switch description</p>
</div>
</h-radio-content>
</h-radio>
Inner h-radio components¶
We provide several components that can be used to create a radio control.
h-radio-control¶
The h-radio-control renders a html radio control. It can be used standalone, separate from h-radio It accepts multiple attributes, that can be passed to control directly (if used standalone), or we can set them to h-radio. The root element has a radio__control class.
| Attribute name | Type | Default | Description |
|---|---|---|---|
| controlId | string | '' | |
| controlName | string | '' | |
| disabled | boolean | false | |
| required | boolean | false | |
| hidden | boolean | false | |
| readonly | boolean | false | |
| checked | boolean | false | |
| value | string | '' |
h-radio-content¶
The h-radio-content renders a label with additional description for html radio control. It uses slots to render label and description. Description is optional. The root element has a radio__content class.