yarn add @smashing/form-field @smashing/form mobx-react-lite mobx
Basic example
FormField
must be wrapped in Form
component.
import {useForm} from '@smashing/form'
import {FormField} from '@smashing/form-field'
import {TextInput} from '@smashing/text-input'
const App = () => {
const {Form} = useForm({
initialValues: {
email: ''
}
})
return (
<Form>
<FormField
name="email"
label="Your email"
placeholder="Type your email..."
component={TextInput}
/>
</Form>
)
}
With description
<Form>
<FormField
name="email"
label="Your email"
placeholder="Type your email..."
description="Lorem ipsum dolor sit ament"
component={TextInput}
/>
</Form>
With custom description
<Form>
<FormField
name="email"
label="Your email"
placeholder="Type your email..."
description={<div>Lorem ipsum dolor sit ament</div>}
component={TextInput}
/>
</Form>
With hint
<Form>
<FormField
name="email"
label="Your email"
placeholder="Type your email..."
hint="Lorem ipsum dolor sit ament"
component={TextInput}
/>
</Form>
With custom hint
<Form>
<FormField
name="email"
label="Your email"
placeholder="Type your email..."
hint={<div>Lorem ipsum dolor sit ament</div>}
component={TextInput}
/>
</Form>
Inline label
<Form>
<section style={{'--label-column-width': 200}}>
<FormField name="firstName" labelAppearance="inline" label="firstName" />
<FormField name="lastName" labelAppearance="inline" label="lastName" />
</section>
<section style={{'--label-column-width': 150}}>
<FormField name="firstName" labelAppearance="inline" label="firstName" />
<FormField name="lastName" labelAppearance="inline" label="lastName" />
</section>
</Form>