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