Forms
Form components allow users to enter and edit information. They include text fields, selects, checkboxes, switches, and more.
Apple
Banana
Form components are essential for collecting user input. SaleSync provides a comprehensive set of form controls that integrate seamlessly with @tanstack/react-form for form state management and validation.
All form components follow the design tokens system and support consistent sizing, states, and validation patterns.
Select
Select components are used for collecting user provided information from a list of options.
Please select your currency
Checkbox
Checkboxes allow users to select one or more items from a set. They can also be used to turn an option on or off.
Switch
Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.
Textarea
Textarea components allow users to enter multi-line text.
Maximum 500 characters
Date picker
Date picker components allow users to select a date from a dropdown calendar. The value is stored as an ISO 8601 string (YYYY-MM-DD).
Only future dates allowed
Calendar
Calendar renders an inline month grid for date selection — use it when the picker should always be visible rather than inside a dropdown. The value is stored as an ISO 8601 string (YYYY-MM-DD).
Only future dates allowed
Form validation
SaleSync form components integrate seamlessly with @tanstack/react-form for form state management and validation.
Please enter a valid email address
Min 8 characters
Why TanStack Form?
- Type-safe form state with TypeScript
- Built-in validation with adapters for Zod, Yup, Valibot
- Async validation support
- Field-level and form-level validation
- Excellent performance with fine-grained reactivity
API
Complete reference to all props available to form components.
Every form field (FormInput, FromSelect, FormInputArea, CheckboxComp, ToggleComp, DatePickerComp, CalendarComp) accepts these props via FormBase.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | The label for the field. |
required | boolean | false | If true, shows a required marker (*) next to the label. |
hint | string | — | Helper text displayed below the field. |
error | string | — | Error message. When set, replaces the hint and styles the field as invalid. |
disabled | boolean | false | If true, the field is disabled. |
| Prop | Type | Default | Description |
|---|---|---|---|
form | TanstackForm | — | The useForm() instance from @tanstack/react-form. |
name | string | — | Field name, matching a key in defaultValues. |
type | 'text' | 'email' | 'password' | 'number' | 'text' | Input type. FormInput only. |
placeholder | string | — | Placeholder text. |
options | { value: string; label: string }[] | — | Selectable options. FromSelect only. |
rows | number | 4 | Number of visible text rows. FormInputArea only. |
onChange | (value: any) => void | — | Optional override. Defaults to field.handleChange. |
| Prop | Type | Default | Description |
|---|---|---|---|
value | boolean | — | Checked / on state. |
onChange | (value: boolean) => void | — | Change handler. |
size | 'compact' | 'normal' | 'normal' | Track/thumb size. ToggleComp only. |
onLabel / offLabel | string | 'Enabled' / 'Disabled' | Status text shown next to the switch. ToggleComp only. |
labelPosition | 'start' | 'end' | 'end' | Position of the status label. ToggleComp only. |
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Selected date as an ISO 8601 string (YYYY-MM-DD). Pass an empty string for no selection. |
onChange | (value: string) => void | — | Called with the new ISO date string when a day is selected. |
onBlur | () => void | — | Called when the picker loses focus or a date is selected. |
placeholder | string | 'Select date' | Placeholder text shown when no date is selected. DatePickerComp only. |
minDate | string | — | Earliest selectable date as YYYY-MM-DD. Days before this are disabled. |
maxDate | string | — | Latest selectable date as YYYY-MM-DD. Days after this are disabled. |
Form-connected wrappers that wire up a useForm() field to the underlying picker automatically. They accept all DatePickerComp / CalendarComp props except value and onChange (handled internally), plus the following:
| Prop | Type | Default | Description |
|---|---|---|---|
form | TanstackForm | — | The useForm() instance from @tanstack/react-form. |
name | string | — | Field name matching a key in defaultValues. |
onChange | (value: any) => void | — | Optional override. Defaults to field.handleChange. |
zodFormValidator(schema) adapts a Zod schema into a TanStack Form validator, mapping issues to field-level error messages. useFieldError(form, path) reads the current error message for a given field path, including nested/array fields, directly from the form store.
// Input tokens (tokens.component.input)
input: {
sm: { paddingX: '10px', paddingY: '6px', fontSize: '12px', radius: '6px', minHeight: '32px' },
md: { paddingX: '12px', paddingY: '8px', fontSize: '14px', radius: '8px', minHeight: '40px' },
lg: { paddingX: '16px', paddingY: '12px', fontSize: '16px', radius: '8px', minHeight: '48px' },
bg: '#FFFFFF',
bgDisabled: '#F3F4F6',
border: '#E5E7EB',
borderHover: '#D1D5DB',
borderFocus: '#3C53FF',
borderError: '#FC3638',
text: '#111827',
placeholder: '#9CA3AF',
}