1# input
2
3
4The **\<input>** component provides a radio button to receive user input.
5
6> **NOTE**
7>
8> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
9
10## Attributes
11
12In addition to the [universal attributes](js-service-widget-common-attributes.md), the following attributes are supported.
13
14| Name     | Type     | Default Value  | Mandatory  | Description                                      |
15| ------- | ------- | ----- | ---- | ---------------------------------------- |
16| type    | string  | radio | Yes   | Type of the **\<input>** component. Currently, only the radio button is supported.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name.|
17| checked | boolean | false | No   | Whether the component is checked or not.                               |
18| name    | string  | -     | No   | Name of the **\<input>** component.                             |
19| value   | string  | -     | No   | Value of the **\<input>** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name. |
20
21
22## Styles
23
24The [universal styles](js-service-widget-common-styles.md) are supported.
25
26
27## Events
28
29| Name    | Parameter                | Description                                      |
30| ------ | ------------------ | ---------------------------------------- |
31| change | $event.checkedItem | Triggered when the **checked** status of a radio button changes. This event returns the value of the selected **\<input>** component.|
32| click  | -                  | Triggered when the component is clicked.                              |
33
34
35## Example
36
37
38```html
39<!-- xxx.hml -->
40<div class="content">
41  <input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange"></input>
42  <input type="radio" checked='false' name="radioSample" value="radio2" onchange="onRadioChange"></input>
43  <input type="radio" checked='false' name="radioSample" value="radio3" onchange="onRadioChange"></input>
44</div>
45```
46
47
48```css
49/* xxx.css */
50.content{
51  width: 100%;
52  height: 200px;
53  justify-content: center;
54  align-items: center;
55}
56```
57
58
59```json
60{
61  "actions": {
62    "onRadioChange":{
63      "action": "message",
64      "params": {
65        "checkedRadio": "$event.checkedItem"
66      }
67    }
68  }
69}
70```
71**4 x 4 widget**
72
73![input](figures/input.gif)
74