Demos
Empty
<Field.CountryCodeonFocus={(value) => console.log('onFocus', value)}onBlur={(value) => console.log('onBlur', value)}onChange={(value) => console.log('onChange', value)}/>
Placeholder
<Field.CountryCodeplaceholder="Code?"onChange={(value) => console.log('onChange', value)}/>
Label
<Field.CountryCodelabel="Label text"onChange={(value) => console.log('onChange', value)}/>
Option selected
<Field.CountryCodevalue="+47"onChange={(value) => console.log('onChange', value)}/>
Label and option selected
<Field.CountryCodevalue="+46"label="Label text"onChange={(value) => console.log('onChange', value)}/>
With help
<Field.CountryCodevalue="+45"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)}/>
Horizontal layout
<Field.CountryCodelayout="horizontal"value="+45"label="Label text"onChange={(value) => console.log('onChange', value)}/>
Widths
<Field.CountryCodevalue="+45"label="Default width (prop omitted"onChange={(value) => console.log('onChange', value)}/><Field.CountryCodevalue="+45"label="Small"width="small"onChange={(value) => console.log('onChange', value)}/><Field.CountryCodevalue="+45"label="Medium"width="medium"onChange={(value) => console.log('onChange', value)}/><Field.CountryCodevalue="+45"label="Large"width="large"onChange={(value) => console.log('onChange', value)}/><Field.CountryCodevalue="+45"label="Stretch"width="stretch"onChange={(value) => console.log('onChange', value)}/>
Disabled
<Field.CountryCodevalue="+44"label="Label text"onChange={(value) => console.log('onChange', value)}disabled/>
Error
<Field.CountryCodevalue="+43"label="Label text"onChange={(value) => console.log('onChange', value)}error={new FormError('This is what is wrong...')}/>
Validation - Required
<Field.CountryCodelabel="Label text"onChange={(value) => console.log('onChange', value)}requiredvalidateInitiallyvalidateUnchanged/>