Form API

API reference for the Form component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

Demos

For usage examples, visit the component demo page: Form

Import

import { Form } from '@soroush.tech/design-system/Form'

Props

onSubmit

(event: FormEvent<HTMLFormElement>) => void - native submit handler. Call event.preventDefault() and delegate to your form library.

size

keyof Theme['sizes'] - "sm" | "md" | "lg". Default control size for every field.

color

keyof Theme['palette'] - default accent color for every field.

textColor

keyof Theme['text'] - default text color for every field's label, helper, and input content.

disabled

boolean - disables every field.

fullWidth

boolean - stretches every field to fill its container.

id / className / noValidate / data-testid

Forwarded to the <form> element. Set noValidate so field-level validation owns the UX instead of the browser's native popups.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.