@smashing/form-field
TypeScript icon, indicating that this package has built-in type declarations

1.1.5 • Public • Published
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>

/@smashing/form-field/

    Package Sidebar

    Install

    npm i @smashing/form-field

    Weekly Downloads

    4

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    35.3 kB

    Total Files

    15

    Last publish

    Collaborators

    • amroz123
    • hzub
    • idered
    • mkolakowska
    • mzbiejczuk
    • qk