@@ -126,20 +126,30 @@ The form code looks like this and is very simple to modify, based on EUI React c
126
126
* [ EUI GitHub repository] ( https://github.com/elastic/eui )
127
127
128
128
``` xml
129
- <div >
130
- <EuiForm >
131
- <EuiFormRow label =" Age" helpText =" Input customer age" >
132
- <EuiFieldText name =" age" onChange ={e => this.onFormChange(e)} value={this.state.age} />
133
- </EuiFormRow >
134
- <EuiFormRow label =" Minimum balance" helpText ={minimumBalanceHelpText} >
135
- <EuiFieldText name =" minimumBalance" onChange ={e => this.onFormChange(e)} value={this.state.minimumBalance} />
136
- </EuiFormRow >
137
- <EuiSpacer />
138
- <EuiButton onClick ={this.onClickButtonApplyFilter} fill>Apply filter</EuiButton >
139
- <EuiButton onClick ={this.onClickButtonDeleteFilter} >Delete filter</EuiButton >
140
- <EuiButton onClick ={this.onClickButtonClearForm} >Clear form</EuiButton >
141
- </EuiForm >
142
- </div >
129
+ <EuiForm >
130
+ <EuiFormRow label =" Age" helpText =" Input customer age" >
131
+ <EuiFieldText name =" age" onChange ={e => this.onFormChange(e)} value={this.state.age} />
132
+ </EuiFormRow >
133
+ <EuiFormRow label =" Minimum balance" helpText ={minimumBalanceHelpText} >
134
+ <EuiFieldText name =" minimumBalance" onChange ={e => this.onFormChange(e)} value={this.state.minimumBalance} />
135
+ </EuiFormRow >
136
+ <EuiSpacer />
137
+ <EuiText size =" xs" ><h4 >State</h4 ></EuiText >
138
+ <EuiComboBox
139
+ placeholder =" Select a state"
140
+ isLoading ={this.isLoading}
141
+ singleSelection ={{ asPlainText: true }}
142
+ options ={this.state.countryStates}
143
+ selectedOptions ={this.state.countryStateSelected}
144
+ onChange ={this.onCountryStateChange}
145
+ isClearable ={false}
146
+ />
147
+ <EuiSpacer />
148
+ <EuiButton onClick ={this.onClickButtonApplyFilter} fill>Apply filter</EuiButton >
149
+ <EuiButton onClick ={this.onClickButtonDeleteFilter} >Delete filter</EuiButton >
150
+ <EuiButton onClick ={this.onClickButtonClearForm} >Clear form</EuiButton >
151
+ <EuiButton onClick ={this.onClickButtonToday} color =" secondary" >Time: today</EuiButton >
152
+ </EuiForm >
143
153
```
144
154
145
155
I use [ Microsoft Code] ( https://code.visualstudio.com/ ) to edit code and [ Google Chrome] ( https://www.google.com/chrome/ ) to debug.
0 commit comments