Shadcn Ui Form

Shadcn UI — Form

Instructions

ShadForm provides centralized form state, a single Map for all field values, and no need to manage individual controllers. Use a GlobalKey to call saveAndValidate() and read value. Give each form field an id; use Shad*FormField widgets (e.g. ShadInputFormField, ShadCheckboxFormField, ShadSelectFormField, ShadDatePickerFormField, ShadTimePickerFormField, ShadRadioGroupFormField) inside ShadForm.

Basic form

final formKey = GlobalKey();

ShadForm(
  key: formKey,
  child: Column(
    children: [
      ShadInputFormField(
        id: 'username',
        label: const Text('Username'),
        placeholder: const Text('Enter your username'),
        description: const Text('This is your public display name.'),
        validator: (v) {
          if (v.length  DateTime.tryParse(value ?? ''),
  toValueTransformer: (date) =>
      date == null ? null : DateFormat('yyyy-MM-dd').format(date),
  ...
)

Dot notation for nested values

Field IDs like user.name or profile.settings.theme produce nested maps in formKey.currentState!.value, e.g. {'user': {'name': '...', 'email': '...'}}. Provide initialValue as a nested map (not dot-notation keys). Customize separator with fieldIdSeparator (e.g. '/'); set fieldIdSeparator: null to disable nesting and keep flat keys.

Additional resources

• Full details on initial value, setFieldValue/setValue, value transformers, and dot notation: [reference.md](reference.md)
• Form field examples: Checkbox, Switch, Input, Select, RadioGroup, DatePicker, TimePicker component docs/skills.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: serverpod
• Source: serverpod/skills-registry
• License: BSD-3-Clause

Install and usage instructions live in the source repository linked above.