Demos
Empty
Code Editor
<Field.SelectCountry onChange={(value) => console.log('onChange', value)} />
Placeholder
Code Editor
<Field.SelectCountry placeholder="Select something...." onChange={(value) => console.log('onChange', value)} />
Label
Code Editor
<Field.SelectCountry label="Label text" onChange={(value) => console.log('onChange', value)} />
Option selected
Code Editor
<Field.SelectCountry value="bar" onChange={(value) => console.log('onChange', value)} />
Label and option selected
Code Editor
<Field.SelectCountry value="bar" label="Label text" onChange={(value) => console.log('onChange', value)} />
With help
Code Editor
<Field.SelectCountry value="bar" label="Label text" help={{ title: 'Help is available', contents: 'Helping others, encouraging others, are often acts of being kind that have more meaning that you may realize.', }} onChange={(value) => console.log('onChange', value)} />
Disabled
Code Editor
<Field.SelectCountry value="bar" label="Label text" onChange={(value) => console.log('onChange', value)} disabled />
Error
Code Editor
<Field.SelectCountry value="bar" label="Label text" onChange={(value) => console.log('onChange', value)} error={new FormError('This is what is wrong...')} />
Validation - Required
Code Editor
<Field.SelectCountry label="Label text" onChange={(value) => console.log('onChange', value)} required validateInitially validateUnchanged />