tessleng/ui
Implement frontend designs from figma using Chakra UI v3 and Storybook
92
1.64x
Quality
92%
Does it follow best practices?
Impact
92%
1.64xAverage score across 6 eval scenarios
Securityby
Advisory
Suggest reviewing before use
FORM_FIELDS.mdskills/building-low-level-components/
Form Field Components
When the component is a form input, follow these additional conventions. The project uses TanStack Form with a custom useTesslForm wrapper and registered field components.
File Structure
Form field components live in src/components/form/ in their own PascalCase folder:
src/components/form/MyField/
├── MyField.tsx
└── MyField.stories.tsxIntegration with TanStack Form
Form fields use useFieldContext from ~/lib/form/form-hooks to connect to the form state. Wrap the input in FormFieldWrapper for consistent label, error, and helper text rendering.
import { useFieldContext } from '~/lib/form/form-hooks';
import { extractFieldErrors } from '~/lib/form/validation';
import { FormFieldWrapper } from '../FormFieldWrapper';
type MyFieldProps = {
label: React.ReactNode;
required?: boolean;
placeholder?: string;
helper?: React.ReactNode;
disabled?: boolean;
};
export function MyField({
label,
required,
placeholder,
helper,
disabled,
}: MyFieldProps) {
const field = useFieldContext<string>();
const { meta, value } = field.state;
const errors = extractFieldErrors(meta.errors);
return (
<FormFieldWrapper
label={label}
required={required}
helper={helper}
isValid={meta.isValid}
errors={errors}
isTouched={meta.isTouched}
>
{/* Your custom input here, wired to field.handleChange / field.handleBlur */}
</FormFieldWrapper>
);
}Registration
After creating a form field component, register it in ~/lib/form/form-hooks so it can be used via form.AppField:
<form.AppField name="myField">
{(field) => <field.MyField label="My Field" required />}
</form.AppField>