Skip to content

Commit 5915ecf

Browse files
author
guyplusplus
committed
Updated EuiForm with latest version (time filter, state dropdown)
1 parent ac2f170 commit 5915ecf

File tree

1 file changed

+24
-14
lines changed

1 file changed

+24
-14
lines changed

README.md

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -126,20 +126,30 @@ The form code looks like this and is very simple to modify, based on EUI React c
126126
* [EUI GitHub repository](https://github.com/elastic/eui)
127127

128128
```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>&nbsp;
139-
<EuiButton onClick={this.onClickButtonDeleteFilter} >Delete filter</EuiButton>&nbsp;
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>&nbsp;
149+
<EuiButton onClick={this.onClickButtonDeleteFilter} >Delete filter</EuiButton>&nbsp;
150+
<EuiButton onClick={this.onClickButtonClearForm} >Clear form</EuiButton>&nbsp;
151+
<EuiButton onClick={this.onClickButtonToday} color="secondary">Time: today</EuiButton>
152+
</EuiForm>
143153
```
144154

145155
I use [Microsoft Code](https://code.visualstudio.com/) to edit code and [Google Chrome](https://www.google.com/chrome/) to debug.

0 commit comments

Comments
 (0)