Skip to content

Form / FormField ​

Layout wrappers for form inputs. Form provides vertical grouping. FormField provides label, error display, and consistent spacing between fields.

Import ​

tsx
import { Form, FormField } from "silvery"

Form Props ​

PropTypeDefaultDescription
childrenReactNoderequiredForm children (typically FormField components)
onSubmit() => void--Called when Enter is pressed within the form
gapnumber1Gap between form fields

FormField Props ​

PropTypeDefaultDescription
childrenReactNoderequiredField input children
labelstringrequiredField label text
errorstring--Error message to display below the input
descriptionstring--Description text below the label
requiredboolean--Shows * indicator after label

Usage ​

tsx
<Form onSubmit={handleSubmit}>
  <FormField label="Name" error={errors.name} required>
    <TextInput value={name} onChange={setName} />
  </FormField>
  <FormField label="Email" description="Your work email">
    <TextInput value={email} onChange={setEmail} />
  </FormField>
</Form>

See Also ​