const Appearance = () => {
const { data } = Form.useData('appearance', {
size: 'medium',
})
const size: any = data.size
return (
<Form.Appearance size={size}>
<Form.Handler id="appearance">
<Flex.Stack>
<Field.Selection label="Choose size" path="/size">
<Field.Option value="default" title="Default" />
<Field.Option value="medium" title="Medium" />
<Field.Option value="large" title="Large" />
</Field.Selection>
<Field.String label="String" value="Foo" />
<Field.String
label="String multiline"
multiline
value="Foo"
rows={1}
/>
<Field.Number label="Number" value={1234} />
<Field.Number
label="Number"
currency
currencyDisplay="name"
value={1234}
showStepControls
/>
<Field.Date />
<Field.Email value="mail@dnb.no" />
<Field.Currency
label="Amount"
currencyDisplay="name"
value={1234}
/>
<Field.Expiry />
<Field.NationalIdentityNumber value="12345678012" />
<Field.OrganizationNumber value="123123123" />
<Field.PhoneNumber />
<Field.PostalCodeAndCity
postalCode={{}}
city={{
value: 'Oslo',
}}
/>
<Field.SelectCountry />
<Field.BankAccountNumber />
<Field.Name.First />
<Field.Name.Last />
<Field.DateOfBirth />
<Field.Password />
<Field.Slider />
<Field.Upload />
<Field.Address.Postal />
<Field.Address.Street />
<Field.Indeterminate dependencePaths={[]} />
<Field.Toggle valueOn="what-ever" valueOff="you-name-it" />
<Field.Boolean />
<Form.ButtonRow>
<Form.SubmitButton />
</Form.ButtonRow>
</Flex.Stack>
</Form.Handler>
</Form.Appearance>
)
}
render(<Appearance />)