# Shadcn Ui Form

> Build forms with ShadForm, validation, and form field values; use ShadInputFormField, ShadCheckboxFormField, ShadSelectFormField, ShadDatePickerFormField, etc. Use when building validated forms, getting form values, or using dot notation for nested fields in a Flutter shadcn_ui app.

- **Type:** Skill
- **Install:** `agentstack add skill-serverpod-skills-registry-shadcn-ui-form`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [serverpod](https://agentstack.voostack.com/s/serverpod)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** BSD-3-Clause
- **Upstream author:** [serverpod](https://github.com/serverpod)
- **Source:** https://github.com/serverpod/skills-registry/tree/main/skills/shadcn_ui/shadcn_ui-form

## Install

```sh
agentstack add skill-serverpod-skills-registry-shadcn-ui-form
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```dart
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](https://github.com/serverpod)
- **Source:** [serverpod/skills-registry](https://github.com/serverpod/skills-registry)
- **License:** BSD-3-Clause

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-serverpod-skills-registry-shadcn-ui-form
- Seller: https://agentstack.voostack.com/s/serverpod
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.