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