1.1.5 • Published 4 years ago
@smashing/form-field v1.1.5
yarn add @smashing/form-field @smashing/form mobx-react-lite mobx
Basic example
FormField
must be wrapped inForm
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>
1.1.5
4 years ago
1.1.1
4 years ago
1.1.2
4 years ago
1.1.0
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.5.7
4 years ago
0.5.6
4 years ago
0.5.5
4 years ago
0.5.4
4 years ago
0.5.3
4 years ago
0.5.2
4 years ago
0.5.1
4 years ago
0.5.0
4 years ago
0.4.0
4 years ago
0.3.0
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.0
5 years ago
0.0.1-alpha.566
5 years ago