1# $$ Syntax: Two-Way Synchronization of Built-in Components
2
3
4The $$ operator provides a TypeScript variable by-reference to a built-in component so that the variable value and the internal state of that component are kept in sync.
5
6
7What the internal state is depends on the component. For example, for the [TextInput](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md) component, it is the **text** parameter.
8
9
10> **NOTE**
11>
12> $$ is also used for [by-reference parameter passing for the @Builder decorator](arkts-builder.md#by-reference-parameter-passing). Pay attention to the differences between the two usages.
13
14
15## Rules of Use
16
17- Currently, $$ supports basic variables and variables decorated by [\@State](arkts-state.md), [\@Link](arkts-link.md), and [\@Prop](arkts-prop.md).
18
19- $$ supports the components listed below.
20
21  | Component                                                        | Supported Parameter/Attribute| Initial API Version|
22  | ------------------------------------------------------------ | --------------- | ----------- |
23  | [Checkbox](../reference/apis-arkui/arkui-ts/ts-basic-components-checkbox.md) | select          | 10          |
24  | [CheckboxGroup](../reference/apis-arkui/arkui-ts/ts-basic-components-checkboxgroup.md) | selectAll       | 10          |
25  | [DatePicker](../reference/apis-arkui/arkui-ts/ts-basic-components-datepicker.md) | selected        | 10          |
26  | [TimePicker](../reference/apis-arkui/arkui-ts/ts-basic-components-timepicker.md) | selected        | 10          |
27  | [MenuItem](../reference/apis-arkui/arkui-ts/ts-basic-components-menuitem.md) | selected        | 10          |
28  | [Panel](../reference/apis-arkui/arkui-ts/ts-container-panel.md)         | mode            | 10          |
29  | [Radio](../reference/apis-arkui/arkui-ts/ts-basic-components-radio.md)  | checked         | 10          |
30  | [Rating](../reference/apis-arkui/arkui-ts/ts-basic-components-rating.md) | rating          | 10          |
31  | [Search](../reference/apis-arkui/arkui-ts/ts-basic-components-search.md) | value           | 10          |
32  | [SideBarContainer](../reference/apis-arkui/arkui-ts/ts-container-sidebarcontainer.md) | showSideBar     | 10          |
33  | [Slider](../reference/apis-arkui/arkui-ts/ts-basic-components-slider.md) | value           | 10          |
34  | [Stepper](../reference/apis-arkui/arkui-ts/ts-basic-components-stepper.md) | index           | 10          |
35  | [Swiper](../reference/apis-arkui/arkui-ts/ts-container-swiper.md)       | index       | 10          |
36  | [Tabs](../reference/apis-arkui/arkui-ts/ts-container-tabs.md)           | index           | 10          |
37  | [TextArea](../reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md) | text            | 10          |
38  | [TextInput](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md) | text            | 10          |
39  | [TextPicker](../reference/apis-arkui/arkui-ts/ts-basic-components-textpicker.md) | selected, value| 10          |
40  | [Toggle](../reference/apis-arkui/arkui-ts/ts-basic-components-toggle.md) | isOn            | 10          |
41  | [AlphabetIndexer](../reference/apis-arkui/arkui-ts/ts-container-alphabet-indexer.md) | selected        | 10          |
42  | [Select](../reference/apis-arkui/arkui-ts/ts-basic-components-select.md) | selected, value| 10          |
43  | [BindSheet](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md) | isShow | 10          |
44  | [BindContentCover](../reference/apis-arkui/arkui-ts/ts-universal-attributes-modal-transition.md) | isShow | 10          |
45  | [Refresh](../reference/apis-arkui/arkui-ts/ts-container-refresh.md) | refreshing | 8 |
46  | [GridItem](../reference/apis-arkui/arkui-ts/ts-container-griditem.md) | selected | 10 |
47  | [ListItem](../reference/apis-arkui/arkui-ts/ts-container-listitem.md) | selected | 10 |
48
49- When the variable bound to $$ changes, the UI is re-rendered synchronously.
50
51
52## Example
53
54This example uses the **text** parameter of the [TextInput](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md) component.
55
56
57```ts
58// xxx.ets
59@Entry
60@Component
61struct TextInputExample {
62  @State text: string = ''
63  controller: TextInputController = new TextInputController()
64
65  build() {
66    Column({ space: 20 }) {
67      Text(this.text)
68      TextInput({ text: $$this.text, placeholder: 'input your word...', controller: this.controller })
69        .placeholderColor(Color.Grey)
70        .placeholderFont({ size: 14, weight: 400 })
71        .caretColor(Color.Blue)
72        .width(300)
73    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
74  }
75}
76```
77
78
79![TextInputDouble](figures/TextInputDouble.gif)
80