---
title: Welcome to Glade Forms!
description: Versatile Forms framework
---

Developed with 💚 by [netglade][netglade_link]

<p align="center" class="flex justify-center not-prose">
  <a href="https://github.com/netglade/glade_forms/actions"><img src="https://github.com/netglade/glade_forms/actions/workflows/ci.yaml/badge.svg" alt="ci"/></a>
  <a href="https://pub.dartlang.org/packages/glade_forms"><img src="https://img.shields.io/pub/v/glade_forms.svg" alt="glade_forms"/></a>
  <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license: MIT"/></a>
  <a href="https://pub.dev/packages/netglade_analysis"><img src="https://img.shields.io/badge/style-netglade_analysis-26D07C.svg" alt="style: netglade analysis"/></a>
  <a href="https://discord.gg/sJfBBuDZy4"><img src="https://img.shields.io/discord/1091460081054400532.svg?logo=discord&color=blue" alt="Discord"/></a>
</p>

---

A universal way to define form validators with support of translations.

## 👀 What is this?

Glade Forms offer unified way to define reusable form inputs
with support of fluent API to define input's validators
and with support of translation on top of that.

Mannaging forms in Flutter is... unpleasant.

With Glade Forms you create a model that holds glade inputs,
setup validation, translation, dependencies, handling of updates,
and more with ease.

## 🚀 Getting started

To start,
setup a Model class that holds glade inputs together.

```dart
class MyModel extends GladeModel {
  late GladeStringInput name;
  late GladeIntInput age;
  late GladeStringInput email;

  @override
  List<GladeInput<Object?>> get inputs => [name, age, email];

  @override
  void initialize() {
    name = GladeStringInput();
    age = GladeIntInput(value: 0, useTextEditingController: true);
    email = GladeStringInput(validator: (validator) => (validator..isEmail()).build());

    // Always remember to call initialize() at the end
    super.initialize();
  }
}
```

Then use `GladeFormBuilder`
and connect the model to standard Flutter form and it's inputs like this:

```dart
GladeFormBuilder(
  create: (context) => MyModel(),
  builder: (context, model) => Form(
    autovalidateMode: AutovalidateMode.onUserInteraction,
    child: Column(
      children: [
        TextFormField(
          decoration: const InputDecoration(labelText: 'Name'),
          // connect a controller from glade input
          controller: model.name.controller,
          // connect a validator from glade input
          validator: model.name.textFormFieldInputValidator,
        ),
        TextFormField(
          controller: model.age.controller,
          validator: model.age.textFormFieldInputValidator,
          decoration: const InputDecoration(labelText: 'Age'),
        ),
        TextFormField(
          controller: model.email.controller,
          validator: model.email.textFormFieldInputValidator,
          decoration: const InputDecoration(labelText: 'Email'),
        ),
        const SizedBox(height: 10),
        ElevatedButton(onPressed: model.isValid ? () {} : null, child: const Text('Save')),
      ],
    ),
  ),
)
```

![quick_start_example](/assets/quickstart.gif)

## 👏 Contributing

Your contributions are always welcome! Feel free to open pull request.

[netglade_link]: https://netglade.com/en
[ci_badge]: https://github.com/netglade/glade_forms/actions/workflows/ci.yaml/badge.svg
[ci_badge_link]: https://github.com/netglade/glade_forms/actions
[license_badge]: https://img.shields.io/badge/license-MIT-blue.svg
[license_badge_link]: https://opensource.org/licenses/MIT
[style_badge]: https://img.shields.io/badge/style-netglade_analysis-26D07C.svg
[style_badge_link]: https://pub.dev/packages/netglade_analysis
[glade_forms_pub_badge]: https://img.shields.io/pub/v/glade_forms.svg
[glade_forms_pub_badge_link]: https://pub.dartlang.org/packages/glade_forms
[discord_badge]: https://img.shields.io/discord/1091460081054400532.svg?logo=discord&color=blue
[discord_badge_link]: https://discord.gg/sJfBBuDZy4
[storybook_demo_link]: https://netglade.github.io/glade_forms