The **<input\>** component provides an interactive interface to receive user input. It can be a radio button, check box, button, single-line text box, and more.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<input>** component provides an interactive interface to receive user input. It can be a radio button, check box, button, single-line text box, and more.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p924475517275"><aname="p924475517275"></a><aname="p924475517275"></a>Type of the input component. Available values include <spanid="ph15675399414"><aname="ph15675399414"></a><aname="ph15675399414"></a><strongid="b83541911123611"><aname="b83541911123611"></a><aname="b83541911123611"></a>text</strong>, <strongid="b156006161365"><aname="b156006161365"></a><aname="b156006161365"></a>email</strong>, <strongid="b1389319187364"><aname="b1389319187364"></a><aname="b1389319187364"></a>date</strong>, <strongid="b17253623133610"><aname="b17253623133610"></a><aname="b17253623133610"></a>time</strong>, <strongid="b694311245368"><aname="b694311245368"></a><aname="b694311245368"></a>number</strong>, <strongid="b8826192763614"><aname="b8826192763614"></a><aname="b8826192763614"></a>password</strong>, </span><strongid="b157607296367"><aname="b157607296367"></a><aname="b157607296367"></a>button</strong>, <strongid="b192811231193612"><aname="b192811231193612"></a><aname="b192811231193612"></a>checkbox</strong>, and <strongid="b39501932123616"><aname="b39501932123616"></a><aname="b39501932123616"></a>radio</strong>.</p>
<pid="p1524485513274"><aname="p1524485513274"></a><aname="p1524485513274"></a>The <strongid="b59971579367"><aname="b59971579367"></a><aname="b59971579367"></a>text</strong>, <strongid="b412925983614"><aname="b412925983614"></a><aname="b412925983614"></a>email</strong>, <strongid="b42617014378"><aname="b42617014378"></a><aname="b42617014378"></a>date</strong>, <strongid="b1395915173720"><aname="b1395915173720"></a><aname="b1395915173720"></a>time</strong>, <strongid="b11407333711"><aname="b11407333711"></a><aname="b11407333711"></a>number</strong>, and <strongid="b12487347379"><aname="b12487347379"></a><aname="b12487347379"></a>password</strong> types can be dynamically switched and modified. </p>
<pid="p17244175532712"><aname="p17244175532712"></a><aname="p17244175532712"></a>The <strongid="b66701121123710"><aname="b66701121123710"></a><aname="b66701121123710"></a>button</strong>, <strongid="b1772519228379"><aname="b1772519228379"></a><aname="b1772519228379"></a>checkbox</strong>, and <strongid="b3750102423713"><aname="b3750102423713"></a><aname="b3750102423713"></a>radio</strong> types cannot be dynamically modified. Available values include:</p>
<aname="ul324417555275"></a><aname="ul324417555275"></a><ulid="ul324417555275"><li><strongid="b312413331652"><aname="b312413331652"></a><aname="b312413331652"></a>button</strong>: a button that can be clicked</li><li><strongid="b203263812249"><aname="b203263812249"></a><aname="b203263812249"></a>checkbox</strong>: a check box</li><li><strongid="b8292121938"><aname="b8292121938"></a><aname="b8292121938"></a>radio</strong>: a radio button that allows users to select one from multiple others with the same name</li><li><strongid="b166864913293"><aname="b166864913293"></a><aname="b166864913293"></a>text</strong>: a single-line text field</li><li><strongid="b18160637657"><aname="b18160637657"></a><aname="b18160637657"></a>email</strong>: a field used for an email address</li><li><strongid="b161243814516"><aname="b161243814516"></a><aname="b161243814516"></a>date</strong>: date control, including the year, month, and day, but excluding time</li><li><strongid="b1644983911514"><aname="b1644983911514"></a><aname="b1644983911514"></a>time</strong>: time control, without the time zone</li><li><strongid="b5368840559"><aname="b5368840559"></a><aname="b5368840559"></a>number</strong>: field for entering digits</li><li><strongid="b362814111511"><aname="b362814111511"></a><aname="b362814111511"></a>password</strong>: password field, in which characters will be shielded<divclass="note"id="note45664136102"><aname="note45664136102"></a><aname="note45664136102"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1551717289101"><aname="p1551717289101"></a><aname="p1551717289101"></a>For wearables, only <strongid="b21340211936"><aname="b21340211936"></a><aname="b21340211936"></a>button</strong>, <strongid="b14107223132"><aname="b14107223132"></a><aname="b14107223132"></a>radio</strong>, and <strongid="b1093818254310"><aname="b1093818254310"></a><aname="b1093818254310"></a>checkbox</strong> types are supported.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p12245115512279"><aname="p12245115512279"></a><aname="p12245115512279"></a>Whether the <strongid="b142024206232"><aname="b142024206232"></a><aname="b142024206232"></a><input></strong> component is selected. This attribute is valid only when <strongid="b12202112072313"><aname="b12202112072313"></a><aname="b12202112072313"></a>type</strong> is set to <strongid="b16202162042314"><aname="b16202162042314"></a><aname="b16202162042314"></a>checkbox</strong> or <strongid="b202037208232"><aname="b202037208232"></a><aname="b202037208232"></a>radio</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p20245135542717"><aname="p20245135542717"></a><aname="p20245135542717"></a>Name of the input component.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p0245255112710"><aname="p0245255112710"></a><aname="p0245255112710"></a>Value of the input component. When <strongid="b13677653019"><aname="b13677653019"></a><aname="b13677653019"></a>type</strong> is <strongid="b136511685302"><aname="b136511685302"></a><aname="b136511685302"></a>radio</strong>, this attribute is mandatory and the value must be unique for radio buttons with the same name.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p4246205572711"><aname="p4246205572711"></a><aname="p4246205572711"></a>Content of the hint text. This attribute is available only when the component type is set to <strongid="b29081929613"><aname="b29081929613"></a><aname="b29081929613"></a>text</strong>, <strongid="b15573141610"><aname="b15573141610"></a><aname="b15573141610"></a>email</strong>, <strongid="b1367410610620"><aname="b1367410610620"></a><aname="b1367410610620"></a>date</strong>, <strongid="b1258719818618"><aname="b1258719818618"></a><aname="b1258719818618"></a>time</strong>, <strongid="b128485356122"><aname="b128485356122"></a><aname="b128485356122"></a>number</strong>, or <strongid="b1921103313122"><aname="b1921103313122"></a><aname="b1921103313122"></a>password</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1224635514274"><aname="p1224635514274"></a><aname="p1224635514274"></a>Maximum number of characters that can be entered in the input box. If no value is specified, the number of characters is not limited.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1824635502717"><aname="p1824635502717"></a><aname="p1824635502717"></a>Dynamic modification is not supported.</p>
<divclass="note"id="note1524765512720"><aname="note1524765512720"></a><aname="note1524765512720"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p124795592715"><aname="p124795592715"></a><aname="p124795592715"></a>The soft keyboard is automatically collapsed after you click the <strongid="b1861043823418"><aname="b1861043823418"></a><aname="b1861043823418"></a>Enter</strong> button, except when <strongid="b2064315920354"><aname="b2064315920354"></a><aname="b2064315920354"></a>next</strong> is displayed for the button.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p20247755102711"><aname="p20247755102711"></a><aname="p20247755102711"></a>Icon resource path before text input. This icon does not support click events and is unavailable for <strongid="b87532361769"><aname="b87532361769"></a><aname="b87532361769"></a>button</strong>, <strongid="b15753163612613"><aname="b15753163612613"></a><aname="b15753163612613"></a>checkbox</strong>, and <strongid="b17754736663"><aname="b17754736663"></a><aname="b17754736663"></a>radio</strong> types. The supported icon image formats are JPG, PNG, and SVG.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p11837472328"><aname="p11837472328"></a><aname="p11837472328"></a>Whether to display the character counter for an input box. This attribute takes effect only when <strongid="b2518112655814"><aname="b2518112655814"></a><aname="b2518112655814"></a>maxlength</strong> is set.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p207221573417"><aname="p207221573417"></a><aname="p207221573417"></a>Menu options displayed after users touch the <strongid="b3847114112495"><aname="b3847114112495"></a><aname="b3847114112495"></a>More</strong> button.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p135551628184820"><aname="p135551628184820"></a><aname="p135551628184820"></a>Whether to automatically obtain the focus.</p>
<divclass="note"id="note9175194313116"><aname="note9175194313116"></a><aname="note9175194313116"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p554143517446"><aname="p554143517446"></a><aname="p554143517446"></a>This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the <strongid="b435318566233"><aname="b435318566233"></a><aname="b435318566233"></a>focus</strong> method call (for about 100–500 ms) in <strongid="b1336020563235"><aname="b1336020563235"></a><aname="b1336020563235"></a>onActive</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p9619113118488"><aname="p9619113118488"></a><aname="p9619113118488"></a>Start position for text selection.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p2023014344489"><aname="p2023014344489"></a><aname="p2023014344489"></a>End position for text selection.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1642873734813"><aname="p1642873734813"></a><aname="p1642873734813"></a>Whether to display the soft keyboard during editing.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p10828939174817"><aname="p10828939174817"></a><aname="p10828939174817"></a>Whether to display the icon at the end of the password text box. The setting is valid only when <strongid="b8922113173716"><aname="b8922113173716"></a><aname="b8922113173716"></a>type</strong> is set to <strongid="b17325183893716"><aname="b17325183893716"></a><aname="b17325183893716"></a>password</strong>.</p>
</td>
</tr>
</tbody>
</table>
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory| Description |
| type | string | text<br>| No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.<br>The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.<br>The **button**, **checkbox**, and **radio** types cannot be dynamically modified. <br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name.<br>- **text**: a single-line text field.<br>- **email**: a field used for an email address.<br>- **date**: date component, including the year, month, and day, but excluding time.<br>- **time**: time component, without the time zone.<br>- **number**: field for entering digits.<br>- **password**: password field, in which characters will be shielded.|
| checked | boolean | false | No | Whether the **\<input>** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. |
| name | string | - | No | Name of the **\<input>** component.<br>This attribute is mandatory when **type** is set to **radio**. |
| 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.|
| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. The empty value indicates no limit.|
| enterkeytype | string | default | No | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>Available values include:<br>- default<br>- next<br>- go<br>- done<br>- send<br>- search<br>Except for the **next** type, clicking the Enter key hides the soft keyboard.|
| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.|
| showcounter<sup>5+</sup> | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. |
| menuoptions<sup>5+</sup> | Array<MeunOption> | - | No | Menu options displayed after users click the **More** button. |
| autofocus<sup>6+</sup> | boolean | false | No | Whether to automatically obtain focus.<br>This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.|
| selectedstart<sup>6+</sup> | number | -1 | No | Start position for text selection. |
| selectedend<sup>6+</sup> | number | -1 | No | End position for text selection. |
| softkeyboardenabled<sup>6+</sup> | boolean | true | No | Whether to display the soft keyboard during editing. |
| showpasswordicon<sup>6+</sup> | boolean | true | No | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**. |
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p73631954762"><aname="p73631954762"></a><aname="p73631954762"></a>Path of the icon for a menu option.</p>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p1036311548616"><aname="p1036311548616"></a><aname="p1036311548616"></a>Text content of a menu option.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section066012492913"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="25.997400259974%"headers="mcps1.1.6.1.5 "><pid="p138135501758"><aname="p138135501758"></a><aname="p138135501758"></a>Font color of the single-line text box or button.</p>
<tdclass="cellrowborder"valign="top"width="25.997400259974%"headers="mcps1.1.6.1.5 "><pid="p148131050253"><aname="p148131050253"></a><aname="p148131050253"></a>Font size of the single-line text box or button. </p>
<tdclass="cellrowborder"valign="top"width="25.997400259974%"headers="mcps1.1.6.1.5 "><pid="p12814195013511"><aname="p12814195013511"></a><aname="p12814195013511"></a>Whether the font size changes with the system's font size settings.</p>
<divclass="note"id="note1781416501358"><aname="note1781416501358"></a><aname="note1781416501358"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p13814145011511"><aname="p13814145011511"></a><aname="p13814145011511"></a>If the <strongid="b524714361237"><aname="b524714361237"></a><aname="b524714361237"></a>config-changes</strong> tag of <strongid="b19256136236"><aname="b19256136236"></a><aname="b19256136236"></a>fontSize</strong> is configured for abilities in the <strongid="b32576360318"><aname="b32576360318"></a><aname="b32576360318"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="25.997400259974%"headers="mcps1.1.6.1.5 "><pid="p138140501751"><aname="p138140501751"></a><aname="p138140501751"></a>Color of the hint text in the single-line text box. This attribute is available when the component type is set to <strongid="b1165245531811"><aname="b1165245531811"></a><aname="b1165245531811"></a>text</strong>, <strongid="b7887185781818"><aname="b7887185781818"></a><aname="b7887185781818"></a>email</strong>, <strongid="b662675991816"><aname="b662675991816"></a><aname="b662675991816"></a>date</strong>, <strongid="b104879121919"><aname="b104879121919"></a><aname="b104879121919"></a>time</strong>, <strongid="b936871841920"><aname="b936871841920"></a><aname="b936871841920"></a>number</strong>, or <strongid="b6737912171919"><aname="b6737912171919"></a><aname="b6737912171919"></a>password</strong>.</p>
<tdclass="cellrowborder"valign="top"width="25.997400259974%"headers="mcps1.1.6.1.5 "><pid="p1281455014516"><aname="p1281455014516"></a><aname="p1281455014516"></a>Font weight of the single-line text box or button. For details, see <ahref="js-components-basic-text.md#section5775351116">font-weight</a> of the <strongid="b131111751153712"><aname="b131111751153712"></a><aname="b131111751153712"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="25.997400259974%"headers="mcps1.1.6.1.5 "><pid="p18674134153015"><aname="p18674134153015"></a><aname="p18674134153015"></a>Color of the input cursor.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section1721512551218"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
- When the input component type is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported.
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p18216135511213"><a name="p18216135511213"></a><a name="p18216135511213"></a>Triggered when the content entered in the text box changes. The most recent text entered by the user is returned.</p>
<div class="note" id="note32161955422"><a name="note32161955422"></a><a name="note32161955422"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p521616551527"><a name="p521616551527"></a><a name="p521616551527"></a>If you change the <strong id="b0472428225"><a name="b0472428225"></a><a name="b0472428225"></a>value</strong> attribute directly, this event will not be triggered.</p>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p162165551211"><a name="p162165551211"></a><a name="p162165551211"></a>Triggered when the <strong id="b151716216246"><a name="b151716216246"></a><a name="b151716216246"></a>Enter</strong> key on a soft keyboard is pressed. The type of the <strong id="b141714218245"><a name="b141714218245"></a><a name="b141714218245"></a>Enter</strong> key is returned, which is of the number type. Available values are as follows:</p>
<a name="ul121665519215"></a><a name="ul121665519215"></a><ul id="ul121665519215"><li><strong id="b1548345132518"><a name="b1548345132518"></a><a name="b1548345132518"></a>2</strong>: returned if <strong id="b184901156253"><a name="b184901156253"></a><a name="b184901156253"></a>enterkeytype</strong> is <strong id="b124911657254"><a name="b124911657254"></a><a name="b124911657254"></a>go</strong>.</li><li><strong id="b751686253"><a name="b751686253"></a><a name="b751686253"></a>3</strong>: returned if <strong id="b1052188112512"><a name="b1052188112512"></a><a name="b1052188112512"></a>enterkeytype</strong> is <strong id="b18524802520"><a name="b18524802520"></a><a name="b18524802520"></a>search</strong>.</li><li><strong id="b746419112510"><a name="b746419112510"></a><a name="b746419112510"></a>4</strong>: returned if <strong id="b74652910250"><a name="b74652910250"></a><a name="b74652910250"></a>enterkeytype</strong> is <strong id="b13465189132516"><a name="b13465189132516"></a><a name="b13465189132516"></a>send</strong>.</li><li><strong id="b14743131042519"><a name="b14743131042519"></a><a name="b14743131042519"></a>5</strong>: returned if <strong id="b16743121016252"><a name="b16743121016252"></a><a name="b16743121016252"></a>enterkeytype</strong> is <strong id="b0744191012516"><a name="b0744191012516"></a><a name="b0744191012516"></a>next</strong>.</li><li><strong id="b133514143257"><a name="b133514143257"></a><a name="b133514143257"></a>6</strong>: returned if <strong id="b113411814112516"><a name="b113411814112516"></a><a name="b113411814112516"></a>enterkeytype</strong> is <strong id="b334151416257"><a name="b334151416257"></a><a name="b334151416257"></a>default</strong>, <strong id="b1934281412257"><a name="b1934281412257"></a><a name="b1934281412257"></a>done</strong>, or is not set.</li></ul>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p92171455627"><a name="p92171455627"></a><a name="p92171455627"></a>Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned.</p>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p122171055425"><a name="p122171055425"></a><a name="p122171055425"></a>Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned.</p>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p20217175515210"><a name="p20217175515210"></a><a name="p20217175515210"></a>Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned.</p>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p721812557212"><a name="p721812557212"></a><a name="p721812557212"></a>Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the <strong id="b168471038173918"><a name="b168471038173918"></a><a name="b168471038173918"></a>menuoptions</strong> attribute is set. The option index and selected text content are returned.</p>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p4803155719505"><a name="p4803155719505"></a><a name="p4803155719505"></a>Triggered when the text selection changes.</p>
</td>
</tr>
</tbody>
</table>
- When the input component type is set to **checkbox** or **radio**, the following events are supported.
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p1822119551024"><a name="p1822119551024"></a><a name="p1822119551024"></a>Triggered when the checked status of the <strong id="b13256373400"><a name="b13256373400"></a><a name="b13256373400"></a>checkbox</strong> or <strong id="b17332143714015"><a name="b17332143714015"></a><a name="b17332143714015"></a>radio</strong> button changes.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section47669296127"></a>
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="29.12%"headers="mcps1.1.4.1.2 "><pid="a0fa3cdedaab94e11b1c1df493e671084"><aname="a0fa3cdedaab94e11b1c1df493e671084"></a><aname="a0fa3cdedaab94e11b1c1df493e671084"></a>{focus:true|false}: If <strongid="b42842569136"><aname="b42842569136"></a><aname="b42842569136"></a>focus</strong> is not passed, the default value <strongid="b95941968149"><aname="b95941968149"></a><aname="b95941968149"></a>true</strong> is used.</p>
</td>
<tdclass="cellrowborder"valign="top"width="54%"headers="mcps1.1.4.1.3 "><pid="abc7c81f1669e4e27bdc255ddf7c24167"><aname="abc7c81f1669e4e27bdc255ddf7c24167"></a><aname="abc7c81f1669e4e27bdc255ddf7c24167"></a>Obtains or loses the focus of a component. When the component type is set to text, email, date, time, number, or password, the input method can be displayed or collapsed.</p>
<tdclass="cellrowborder"valign="top"width="54%"headers="mcps1.1.4.1.3 "><pid="p1034315465618"><aname="p1034315465618"></a><aname="p1034315465618"></a>Displays the error message. This attribute is available when the component type is set to text, email, date, time, number, or password.</p>
<tdclass="cellrowborder"valign="top"width="54%"headers="mcps1.1.4.1.3 "><pid="p2920424124118"><aname="p2920424124118"></a><aname="p2920424124118"></a>Deletes the text content based on the current cursor position when the input component type is set to <strongid="b4497036164114"><aname="b4497036164114"></a><aname="b4497036164114"></a>text</strong>, <strongid="b3497173619415"><aname="b3497173619415"></a><aname="b3497173619415"></a>email</strong>, <strongid="b949716360414"><aname="b949716360414"></a><aname="b949716360414"></a>date</strong>, <strongid="b5497236154118"><aname="b5497236154118"></a><aname="b5497236154118"></a>time</strong>, <strongid="b649783615419"><aname="b649783615419"></a><aname="b649783615419"></a>number</strong>, or <strongid="b1749743654115"><aname="b1749743654115"></a><aname="b1749743654115"></a>password</strong>. If the current input component does not have a cursor, the last character is deleted and the cursor is displayed by default.</p>
</td>
</tr>
</tbody>
</table>
## Example Code<a name="section106355275448"></a>
| Name | Type | Description |
| ------- | ------ | ----------- |
| icon | string | Path of the icon for a menu option.|
| content | string | Text content of a menu option.|
1. Single-line text box
```
## Styles
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory| Description |
| color | <color> | \#e6000000 | No | Font color of the single-line text box or button. |
| font-size | <length> | 16px | No | Font size of the single-line text box or button. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| placeholder-color | <color> | \#99000000 | No | Color of the hint text in the single-line text box. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
| font-weight | number \| string | normal | No | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md).|
| caret-color<sup>6+</sup> | <color> | - | No | Color of the input cursor. |
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
- When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported.
| change | {<br> value: inputValue<br> } | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.<br>If you change the **value** attribute directly, this event will not be triggered.|
| enterkeyclick | {<br> value: enterKey<br> } | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:<br>- **2**: returned if **enterkeytype** is **go**.<br>- **3**: returned if **enterkeytype** is **search**.<br>- **4**: returned if **enterkeytype** is **send**.<br>- **5**: returned if **enterkeytype** is **next**.<br>- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.|
| translate<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
| share<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
| search<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
| optionselect<sup>5+</sup> | {<br> index: optionIndex,<br> value: selectedText<br> } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
| selectchange<sup>6+</sup> | {<br>start: number,<br>end: number<br> } | Triggered when the text selection changes. |
- When **type** is set to **checkbox** or **radio**, the following events are supported.
| focus | {<br> focus: true\|false<br> }:<br>If **focus** is not passed, the default value **true** is used.| Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or password, the input method can be displayed or hidden.|
| showError | {<br> error: string <br>} | Displays the error message. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
| delete<sup>6+</sup> | - | Deletes the text content based on the current cursor position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the cursor if the current input component does not have a cursor.|
