From 647f1df5ce469081bf2618a0330e419e822caf66 Mon Sep 17 00:00:00 2001
From: Michal Pokrywka <wolfmoon@o2.pl>
Date: Thu, 29 May 2025 20:14:58 +0200
Subject: [PATCH 1/4] login input css

---
 src/login.rs | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/login.rs b/src/login.rs
index f6a8a71..1a77d8f 100644
--- a/src/login.rs
+++ b/src/login.rs
@@ -14,6 +14,7 @@ pub struct LoginParams {
     pub add_css: Css,
     pub line_css: Css,
     pub line_add_css: Css,
+    pub input_css: Css,
     pub submit_css: Css,
     pub submit_add_css: Css,
     pub error_message: Rc<dyn Fn(String) -> String>,
@@ -38,6 +39,7 @@ impl Default for LoginParams {
                 margin-bottom: 5px;
             "},
             line_add_css: Css::default(),
+            input_css: Css::default(),
             submit_css: css! {"
                 margin-top: 15px;
             "},
@@ -111,7 +113,11 @@ impl<T: Clone + PartialEq + 'static> Login<T> {
         let username_div = dom! {
             <div css={line_css.clone()}>
                 <div>{&params.username_label}</div>
-                <input value={username.to_computed()} on_input={on_username_change} />
+                <input
+                    css={&params.input_css}
+                    value={username.to_computed()}
+                    on_input={on_username_change}
+                />
             </div>
         };
 
@@ -120,7 +126,12 @@ impl<T: Clone + PartialEq + 'static> Login<T> {
         let password_div = dom! {
             <div css={line_css}>
                 <div>{&params.password_label}</div>
-                <input value={password.to_computed()} on_input={on_password_change} type="password" />
+                <input
+                    css={&params.input_css}
+                    value={password.to_computed()}
+                    on_input={on_password_change}
+                    type="password"
+                />
             </div>
         };
 

From d99bfb5d7d2bbfd89ffec657024793bd4e00f721 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pokrywka?= <wolfmoon@o2.pl>
Date: Thu, 5 Jun 2025 16:22:11 +0200
Subject: [PATCH 2/4] AttrGroups for Inputs and DictSelect

---
 src/form/mod.rs                |  4 +-
 src/input/input.rs             | 49 +++++------------------
 src/input/input_with_button.rs | 73 +++++++++++++++-------------------
 src/input/list_input.rs        | 53 ++++++++++--------------
 src/select/dict_select.rs      | 64 +++++++++++++----------------
 storybook/src/input.rs         |  2 +-
 6 files changed, 91 insertions(+), 154 deletions(-)

diff --git a/src/form/mod.rs b/src/form/mod.rs
index 68b4885..e2a0296 100644
--- a/src/form/mod.rs
+++ b/src/form/mod.rs
@@ -8,7 +8,7 @@
 use std::rc::Rc;
 use vertigo::{bind_rc, component, css, dom, Css};
 
-use crate::{input::NamedInput, DictSelect, DropImageFile, DropImageFileParams, Select};
+use crate::{input::Input, DictSelect, DropImageFile, DropImageFileParams, Select};
 
 mod field;
 pub use field::{DataFieldValue, FieldExport, FormExport};
@@ -39,7 +39,7 @@ impl Default for FormParams {
 pub fn Field<'a>(field: &'a DataField) {
     match &field.value {
         DataFieldValue::String(val) => {
-            dom! { <NamedInput name={&field.key} value={val.value.clone()} /> }
+            dom! { <Input input:name={&&field.key} value={val.value.clone()} /> }
         }
         DataFieldValue::List(val) => {
             dom! { <Select value={val.value.clone()} options={&val.options} /> }
diff --git a/src/input/input.rs b/src/input/input.rs
index e9a6da0..011c091 100644
--- a/src/input/input.rs
+++ b/src/input/input.rs
@@ -1,44 +1,13 @@
-use vertigo::{bind, dom, DomNode, Value};
+use vertigo::{bind, component, dom, AttrGroup, Value};
 
 /// Input connected to provided `Value<String>`.
-pub struct Input {
-    pub value: Value<String>,
-}
-
-impl Input {
-    pub fn into_component(self) -> Self {
-        self
-    }
-
-    pub fn mount(self) -> DomNode {
-        let Self { value } = self;
-
-        dom! {
-            <NamedInput name="" {value} />
-        }
-    }
-}
-
-/// Input connected to provided `Value<String>` with name defined.
-pub struct NamedInput {
-    pub name: String,
-    pub value: Value<String>,
-}
-
-impl NamedInput {
-    pub fn into_component(self) -> Self {
-        self
-    }
-
-    pub fn mount(self) -> DomNode {
-        let Self { name, value } = self;
-
-        let on_input = bind!(value, |new_value: String| {
-            value.set(new_value);
-        });
-
-        dom! {
-            <input {name} {value} {on_input} />
-        }
+#[component]
+pub fn Input(value: Value<String>, input: AttrGroup) {
+    let on_input = bind!(value, |new_value: String| {
+        value.set(new_value);
+    });
+
+    dom! {
+        <input {value} {on_input} {..input} />
     }
 }
diff --git a/src/input/input_with_button.rs b/src/input/input_with_button.rs
index 65ad3b6..4548e1c 100644
--- a/src/input/input_with_button.rs
+++ b/src/input/input_with_button.rs
@@ -1,4 +1,4 @@
-use vertigo::{bind, computed_tuple, dom, transaction, Css, DomNode, Value};
+use vertigo::{bind, component, computed_tuple, dom, transaction, AttrGroup, Value};
 
 /// Input connected to provided `Value<String>`.
 ///
@@ -23,64 +23,53 @@ use vertigo::{bind, computed_tuple, dom, transaction, Css, DomNode, Value};
 ///     <InputWithButton
 ///         value={my_value}
 ///         params={InputWithButtonParams {
-///                 input_css: css!("width: 300px;"),
 ///                 button_label: "Load".to_string(),
 ///                 ..Default::default()
 ///         }}
+///         input:css={css!("width: 300px;")}
 ///     />
 /// };
 /// ```
-pub struct InputWithButton {
-    pub value: Value<String>,
-    pub params: InputWithButtonParams,
+#[component]
+pub fn InputWithButton(
+    value: Value<String>,
+    params: InputWithButtonParams,
+    input: AttrGroup,
+    button: AttrGroup,
+) {
+    let temp_value = Value::<Option<String>>::default();
+    let display_value =
+        computed_tuple!(value, temp_value).map(|(value, temp_value)| temp_value.unwrap_or(value));
+
+    let on_input = bind!(temp_value, |new_value: String| {
+        temp_value.set(Some(new_value));
+    });
+
+    let on_click = bind!(value, temp_value, |_| {
+        transaction(|ctx| {
+            let new_value = temp_value.get(ctx);
+            if let Some(new_value) = new_value {
+                value.set(new_value);
+            }
+            temp_value.set(None);
+        })
+    });
+
+    dom! {
+        <input value={display_value} {on_input} {..input}/>
+        <button {on_click} {..button}>{params.button_label}</button>
+    }
 }
 
 #[derive(Clone)]
 pub struct InputWithButtonParams {
-    pub input_css: Css,
     pub button_label: String,
-    pub button_css: Css,
 }
 
 impl Default for InputWithButtonParams {
     fn default() -> Self {
         Self {
-            input_css: Css::default(),
             button_label: "OK".to_string(),
-            button_css: Css::default(),
-        }
-    }
-}
-
-impl InputWithButton {
-    pub fn into_component(self) -> Self {
-        self
-    }
-
-    pub fn mount(self) -> DomNode {
-        let Self { value, params } = self;
-
-        let temp_value = Value::<Option<String>>::default();
-        let display_value = computed_tuple!(value, temp_value)
-            .map(|(value, temp_value)| temp_value.unwrap_or(value));
-
-        let on_input = bind!(temp_value, |new_value: String| {
-            temp_value.set(Some(new_value));
-        });
-
-        let on_click = bind!(value, temp_value, |_| {
-            transaction(|ctx| {
-                let new_value = temp_value.get(ctx);
-                if let Some(new_value) = new_value {
-                    value.set(new_value);
-                }
-                temp_value.set(None);
-            })
-        });
-
-        dom! {
-            <input css={params.input_css} value={display_value} {on_input} />
-            <button css={params.button_css} {on_click}>{params.button_label}</button>
         }
     }
 }
diff --git a/src/input/list_input.rs b/src/input/list_input.rs
index 5090217..edd07e8 100644
--- a/src/input/list_input.rs
+++ b/src/input/list_input.rs
@@ -1,40 +1,29 @@
-use vertigo::{bind, dom, DomNode, Value};
+use vertigo::{bind, component, dom, AttrGroup, Value};
 
 /// Input connected to provided `Value<Vec<String>>`.
 ///
 /// It parsed a comma-separated input string and sets value as a vector.
-pub struct ListInput {
-    pub value: Value<Vec<String>>,
-}
-
-impl ListInput {
-    pub fn into_component(self) -> Self {
-        self
-    }
-
-    pub fn mount(self) -> DomNode {
-        let Self { value } = self;
-
-        let value_str = value.map(|v| v.join(","));
+#[component]
+pub fn ListInput(value: Value<Vec<String>>, input: AttrGroup) {
+    let value_str = value.map(|v| v.join(","));
 
-        let on_input = bind!(value, |new_value: String| {
-            value.set(
-                new_value
-                    .split(',')
-                    .filter_map(|v| {
-                        let v = v.trim();
-                        if v.is_empty() {
-                            None
-                        } else {
-                            Some(v.to_string())
-                        }
-                    })
-                    .collect(),
-            );
-        });
+    let on_input = bind!(value, |new_value: String| {
+        value.set(
+            new_value
+                .split(',')
+                .filter_map(|v| {
+                    let v = v.trim();
+                    if v.is_empty() {
+                        None
+                    } else {
+                        Some(v.to_string())
+                    }
+                })
+                .collect(),
+        );
+    });
 
-        dom! {
-            <input value={value_str} on_input={on_input} />
-        }
+    dom! {
+        <input value={value_str} on_input={on_input} {..input} />
     }
 }
diff --git a/src/select/dict_select.rs b/src/select/dict_select.rs
index 392bcff..9e968de 100644
--- a/src/select/dict_select.rs
+++ b/src/select/dict_select.rs
@@ -1,4 +1,4 @@
-use vertigo::{bind, dom, Computed, DomNode, Value};
+use vertigo::{bind, component, dom, AttrGroup, Computed, Value};
 
 /// Simple Select component based on map of `i64`->`T` values.
 ///
@@ -23,44 +23,34 @@ use vertigo::{bind, dom, Computed, DomNode, Value};
 ///     />
 /// };
 /// ```
-pub struct DictSelect<T: Clone> {
-    pub value: Value<i64>,
-    pub options: Computed<Vec<(i64, T)>>,
-}
-
-impl<T> DictSelect<T>
-where
-    T: Clone + From<String> + PartialEq + ToString + 'static,
-{
-    pub fn into_component(self) -> Self {
-        self
-    }
-
-    pub fn mount(&self) -> DomNode {
-        let Self { value, options } = self;
-        let on_change = bind!(value, |new_value: String| {
-            value.set(new_value.parse().unwrap_or_default());
-        });
+#[component]
+pub fn DictSelect<T: Clone + From<String> + PartialEq + ToString + 'static>(
+    value: Value<i64>,
+    options: Computed<Vec<(i64, T)>>,
+    select: AttrGroup,
+) {
+    let on_change = bind!(value, |new_value: String| {
+        value.set(new_value.parse().unwrap_or_default());
+    });
 
-        let list = bind!(
-            options,
-            value.render_value(move |value| options.render_list(
-                |(key, _)| key.to_string(),
-                move |(key, item)| {
-                    let text_item = item.to_string();
-                    if key == &value {
-                        dom! { <option value={&key} selected="selected">{text_item}</option> }
-                    } else {
-                        dom! { <option value={&key}>{text_item}</option> }
-                    }
+    let list = bind!(
+        options,
+        value.render_value(move |value| options.render_list(
+            |(key, _)| key.to_string(),
+            move |(key, item)| {
+                let text_item = item.to_string();
+                if key == &value {
+                    dom! { <option value={&key} selected="selected">{text_item}</option> }
+                } else {
+                    dom! { <option value={&key}>{text_item}</option> }
                 }
-            ))
-        );
+            }
+        ))
+    );
 
-        dom! {
-            <select {on_change}>
-                {list}
-            </select>
-        }
+    dom! {
+        <select {on_change} {..select}>
+            {list}
+        </select>
     }
 }
diff --git a/storybook/src/input.rs b/storybook/src/input.rs
index 33ba93f..71df725 100644
--- a/storybook/src/input.rs
+++ b/storybook/src/input.rs
@@ -33,7 +33,7 @@ pub fn input() -> DomNode {
     let list_input = dom! {
         <h4>"ListInput"</h4>
         <p>
-            "Enter value: "
+            "Enter comma-separated values: "
             <ListInput value={value.clone()} />
         </p>
         <p>

From 06e2aebabb3015962cb1cc327f28a89f35bafc11 Mon Sep 17 00:00:00 2001
From: Michal Pokrywka <wolfmoon@o2.pl>
Date: Fri, 25 Jul 2025 16:38:44 +0200
Subject: [PATCH 3/4] More options for Form

---
 Cargo.toml             |   2 +-
 src/drop_image_file.rs |  18 ++-
 src/form/field.rs      | 128 +++++++++++++++++---
 src/form/form_data.rs  | 106 +++++++++++++++--
 src/form/mod.rs        | 265 +++++++++++++++++++++++++++++++++++------
 src/switch.rs          |  92 +++++++-------
 storybook/src/form.rs  |  39 +++---
 7 files changed, 517 insertions(+), 133 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 7a3cf17..5ca0b83 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -5,7 +5,7 @@ members = ["storybook", "examples/form"]
 name = "vertigo-forms"
 version = "0.1.0"
 authors = ["Michał Pokrywka <wolfmoon@o2.pl>"]
-edition = "2021"
+edition = "2024"
 
 [dependencies]
 base64 = "0.22"
diff --git a/src/drop_image_file.rs b/src/drop_image_file.rs
index e0c1f34..ae63916 100644
--- a/src/drop_image_file.rs
+++ b/src/drop_image_file.rs
@@ -13,7 +13,8 @@ pub struct DropImageFile {
 
 #[derive(Clone)]
 pub struct DropImageFileParams {
-    pub callback: Option<Rc<dyn Fn(DropFileItem)>>,
+    /// Custom callback when new image dropped, leave empty to automatically set/unset `item`
+    pub callback: Option<Rc<dyn Fn(Option<DropFileItem>)>>,
     pub revert_label: String,
     pub cancel_label: String,
     pub no_image_text: String,
@@ -63,6 +64,7 @@ impl DropImageFile {
         );
         let item_clone = self.item.clone();
         let params = self.params.clone();
+        let callback = self.params.callback.clone();
         let image_view = view_deps.render_value(move |(original, item, base64_date)| match item {
             Some(item) => {
                 let message = format_line(&item);
@@ -70,7 +72,13 @@ impl DropImageFile {
                     display: flex;
                     flex-flow: column;
                 "};
-                let restore = bind!(item_clone, |_| item_clone.set(None));
+                let restore = bind!(item_clone, callback, |_| {
+                    if let Some(callback) = &callback {
+                        callback(None);
+                    } else {
+                        item_clone.set(None);
+                    }
+                });
                 let restore_text = if original.is_some() {
                     &params.revert_label
                 } else {
@@ -97,11 +105,9 @@ impl DropImageFile {
         let on_dropfile = move |event: DropFileEvent| {
             for file in event.items.into_iter() {
                 if let Some(callback) = callback.as_deref() {
-                    callback(file);
+                    callback(Some(file));
                 } else {
-                    item.change(|current| {
-                        *current = Some(file);
-                    });
+                    item.set(Some(file));
                 }
             }
         };
diff --git a/src/form/field.rs b/src/form/field.rs
index 87d39bd..633146c 100644
--- a/src/form/field.rs
+++ b/src/form/field.rs
@@ -1,7 +1,7 @@
 use std::{collections::HashMap, rc::Rc};
-use vertigo::{Computed, Context, DropFileItem, Value};
+use vertigo::{Computed, Context, DomNode, DropFileItem, Value};
 
-use crate::image_as_uri;
+use crate::{image_as_uri, nonify, DropImageFileParams};
 
 #[derive(Clone)]
 pub struct StringValue {
@@ -9,24 +9,46 @@ pub struct StringValue {
     pub original_value: Rc<String>,
 }
 
+#[derive(Clone)]
+pub struct TextAreaValue {
+    pub value: Value<String>,
+    pub original_value: Option<Rc<String>>,
+    pub rows: Option<i32>,
+    pub cols: Option<i32>,
+}
+
 #[derive(Clone)]
 pub struct ListValue {
     pub value: Value<String>,
-    pub original_value: Rc<String>,
+    pub original_value: Option<Rc<String>>,
     pub options: Computed<Vec<String>>,
 }
 
 #[derive(Clone)]
 pub struct DictValue {
     pub value: Value<i64>,
-    pub original_value: Rc<i64>,
+    pub original_value: Option<Rc<i64>>,
     pub options: Computed<Vec<(i64, String)>>,
 }
 
+#[derive(Clone)]
+pub struct BoolValue {
+    pub value: Value<bool>,
+    pub original_value: Option<Rc<bool>>,
+}
+
 #[derive(Clone)]
 pub struct ImageValue {
     pub value: Value<Option<DropFileItem>>,
     pub original_link: Option<Rc<String>>,
+    pub component_params: Option<DropImageFileParams>,
+}
+
+#[derive(Clone)]
+pub struct CustomValue {
+    pub value: Value<String>,
+    pub original_value: Option<Rc<String>>,
+    pub render: Rc<dyn Fn() -> DomNode>,
 }
 
 /// Value of a field in form section.
@@ -34,26 +56,39 @@ pub struct ImageValue {
 pub enum DataFieldValue {
     /// Regular string field.
     String(StringValue),
+    /// Textarea string field.
+    TextArea(TextAreaValue),
     /// String field with options.
     List(ListValue),
     /// Integer (foreign key) field with labels for each integer.
     Dict(DictValue),
+    /// Checkbox
+    Bool(BoolValue),
     /// Image (bytes) field.
     Image(ImageValue),
+    /// Custom field
+    Custom(CustomValue),
+    /// Custom component without value
+    StaticCustom(Rc<dyn Fn() -> DomNode>)
 }
 
 impl DataFieldValue {
     pub fn export(&self, ctx: &Context) -> FieldExport {
         match self {
             Self::String(val) => FieldExport::String(val.value.get(ctx)),
+            Self::TextArea(val) => FieldExport::String(val.value.get(ctx)),
             Self::List(val) => FieldExport::List(val.value.get(ctx)),
             Self::Dict(val) => FieldExport::Dict(val.value.get(ctx)),
+            Self::Bool(val) => FieldExport::Bool(val.value.get(ctx)),
             Self::Image(val) => FieldExport::Image((val.original_link.clone(), val.value.get(ctx))),
+            Self::Custom(val) => FieldExport::String(val.value.get(ctx)),
+            Self::StaticCustom(_) => FieldExport::String("".to_string())
         }
     }
 }
 
 pub enum FieldExport {
+    Bool(bool),
     String(String),
     List(String),
     Dict(i64),
@@ -61,11 +96,12 @@ pub enum FieldExport {
 }
 
 /// After form is submitted, it generates an export from every field. This can be used to construct a new model.
-pub struct FormExport(HashMap<String, FieldExport>);
+#[derive(Clone)]
+pub struct FormExport(Rc<HashMap<String, FieldExport>>);
 
 impl FormExport {
     pub fn new(map: HashMap<String, FieldExport>) -> Self {
-        Self(map)
+        Self(Rc::new(map))
     }
 
     pub fn get<'a>(&'a self, key: &str) -> Option<&'a FieldExport> {
@@ -74,19 +110,24 @@ impl FormExport {
 
     /// Get value from string input.
     pub fn get_string(&self, key: &str) -> String {
+        self.get_string_opt(key)
+            .unwrap_or_default()
+    }
+
+    /// Get value from string input or None if empty.
+    pub fn get_string_opt(&self, key: &str) -> Option<String> {
         self.get(key)
-            .map(|export| {
+            .and_then(|export| {
                 if let FieldExport::String(val) = export {
-                    val.clone()
+                    nonify(val.clone())
                 } else {
-                    Default::default()
+                    None
                 }
             })
-            .unwrap_or_default()
     }
 
-    // Get value from list field (string).
-    pub fn list_or_default(&self, key: &str) -> String {
+    // Get value from list field (string-based).
+    pub fn list_or_default<T: From<String>>(&self, key: &str) -> T {
         self.get(key)
             .map(|export| {
                 if let FieldExport::List(val) = export {
@@ -96,10 +137,11 @@ impl FormExport {
                 }
             })
             .unwrap_or_default()
+            .into()
     }
 
-    // Get value from dict field (i64).
-    pub fn dict_or_default(&self, key: &str) -> i64 {
+    // Get value from dict field (i64-based).
+    pub fn dict_or_default<T: From<i64>>(&self, key: &str) -> T {
         self.get(key)
             .map(|export| {
                 if let FieldExport::Dict(val) = export {
@@ -109,24 +151,74 @@ impl FormExport {
                 }
             })
             .unwrap_or_default()
+            .into()
+    }
+
+    /// Get value from bool input (i. e. checkbox) or false.
+    pub fn get_bool(&self, key: &str) -> bool {
+        self.get_bool_opt(key).unwrap_or_default()
+    }
+
+    /// Get value from bool input (i. e. checkbox) or None.
+    pub fn get_bool_opt(&self, key: &str) -> Option<bool> {
+        self.get(key)
+            .and_then(|export| {
+                if let FieldExport::Bool(val) = export {
+                    Some(*val)
+                } else {
+                    None
+                }
+            })
     }
 
     // Get new image (base64) or original value from image field.
     pub fn image_url(&self, key: &str) -> String {
+        self.image_url_opt(key).unwrap_or_default()
+    }
+
+    // Get new image (base64) or original value from image field or none.
+    pub fn image_url_opt(&self, key: &str) -> Option<String> {
         if let Some(export) = self.get(key) {
             match export {
                 FieldExport::Image((orig_link, dfi)) => {
-                    dfi.as_ref().map(image_as_uri).unwrap_or_else(|| {
+                    dfi.as_ref().map(image_as_uri).or_else(|| {
                         orig_link
                             .as_ref()
                             .map(|ol| ol.to_string())
-                            .unwrap_or_default()
                     })
                 }
-                _ => String::default(),
+                _ => None,
+            }
+        } else {
+            None
+        }
+    }
+
+    // Get new image (base64)
+    pub fn image_item_opt(&self, key: &str) -> Option<DropFileItem> {
+        if let Some(export) = self.get(key) {
+            match export {
+                FieldExport::Image((_orig_link, dfi)) => {
+                    dfi.clone()
+                }
+                _ => None,
+            }
+        } else {
+            None
+        }
+    }
+
+    // Get original image url
+    pub fn image_orig_url_opt(&self, key: &str) -> Option<String> {
+        if let Some(export) = self.get(key) {
+            match export {
+                FieldExport::Image((orig_link, _dfi)) => {
+                    orig_link.as_deref().map(|s| s.to_string())
+                }
+                _ => None,
             }
         } else {
-            String::default()
+            None
         }
     }
 }
diff --git a/src/form/form_data.rs b/src/form/form_data.rs
index 0f730c7..a246332 100644
--- a/src/form/form_data.rs
+++ b/src/form/form_data.rs
@@ -1,5 +1,7 @@
 use std::{collections::HashMap, rc::Rc};
-use vertigo::{transaction, Computed, DomElement, Value};
+use vertigo::{transaction, Computed, Css, DomElement, Value};
+
+use crate::form::field::BoolValue;
 
 use super::{
     field::{DictValue, ImageValue, ListValue, StringValue},
@@ -39,6 +41,30 @@ use super::{
 #[derive(Default)]
 pub struct FormData {
     pub sections: Vec<DataSection>,
+    pub top_controls: ControlsConfig,
+    pub bottom_controls: ControlsConfig,
+}
+
+#[derive(Default)]
+pub struct ControlsConfig {
+    pub css: Option<Css>,
+    pub submit: bool,
+    pub delete: bool,
+}
+
+impl ControlsConfig {
+    pub fn full() -> Self {
+        Self {
+            css: None,
+            submit: true,
+            delete: true,
+        }
+    }
+
+    pub fn with_css(mut self, css: Css) -> Self {
+        self.css = Some(css);
+        self
+    }
 }
 
 impl FormData {
@@ -48,6 +74,26 @@ impl FormData {
         self
     }
 
+    pub fn add_top_controls(mut self) -> Self {
+        self.top_controls = ControlsConfig::full();
+        self
+    }
+
+    pub fn add_top_controls_styled(mut self, css: Css) -> Self {
+        self.top_controls = ControlsConfig::full().with_css(css);
+        self
+    }
+
+    pub fn add_bottom_controls(mut self) -> Self {
+        self.bottom_controls = ControlsConfig::full();
+        self
+    }
+
+    pub fn add_bottom_controls_styled(mut self, css: Css) -> Self {
+        self.bottom_controls = ControlsConfig::full().with_css(css);
+        self
+    }
+
     pub fn export(&self) -> FormExport {
         let mut hash_map = HashMap::new();
         transaction(|ctx| {
@@ -79,9 +125,12 @@ pub struct DataSection {
     pub error: Option<String>,
     pub render: Option<Rc<dyn Fn(Vec<DataField>) -> DomElement>>,
     pub fieldset_style: FieldsetStyle,
+    pub fieldset_css: Option<Css>,
+    pub new_group: bool,
 }
 
 /// A single field in form section.
+#[derive(Clone)]
 pub struct DataField {
     pub key: String,
     pub value: DataFieldValue,
@@ -116,6 +165,14 @@ impl DataSection {
         }
     }
 
+    pub fn add_field(mut self, key: impl Into<String>, value: DataFieldValue) -> Self {
+        self.fields.push(DataField {
+            key: key.into(),
+            value,
+        });
+        self
+    }
+
     /// Add another string field to form section (text input).
     pub fn add_string_field(
         mut self,
@@ -137,16 +194,16 @@ impl DataSection {
     pub fn add_list_field(
         mut self,
         key: impl Into<String>,
-        original_value: impl Into<String>,
+        original_value: Option<impl Into<String>>,
         options: Vec<String>,
     ) -> Self {
-        let value = original_value.into();
+        let value = original_value.map(|s| s.into());
         let options = Computed::from(move |_ctx| options.clone());
         self.fields.push(DataField {
             key: key.into(),
             value: DataFieldValue::List(ListValue {
-                value: Value::new(value.clone()),
-                original_value: Rc::new(value),
+                value: Value::new(value.clone().unwrap_or_default()),
+                original_value: value.map(Rc::new),
                 options,
             }),
         });
@@ -157,32 +214,51 @@ impl DataSection {
     pub fn add_dict_field(
         mut self,
         key: impl Into<String>,
-        original_value: i64,
+        original_value: Option<i64>,
         options: Vec<(i64, String)>,
     ) -> Self {
         let options = Computed::from(move |_ctx| options.clone());
         self.fields.push(DataField {
             key: key.into(),
             value: DataFieldValue::Dict(DictValue {
-                value: Value::new(original_value),
-                original_value: Rc::new(original_value),
+                value: Value::new(original_value.unwrap_or_default()),
+                original_value: original_value.map(Rc::new),
                 options,
             }),
         });
         self
     }
 
+    /// Add another bool field to form section (checkbox input).
+    pub fn add_bool_field(
+        mut self,
+        key: impl Into<String>,
+        original_value: Option<impl Into<bool>>,
+    ) -> Self {
+        let value = original_value.map(|b| b.into());
+        self.fields.push(DataField {
+            key: key.into(),
+            value: DataFieldValue::Bool(BoolValue {
+                value: Value::new(value.unwrap_or_default()),
+                original_value: value.map(Rc::new),
+            }),
+        });
+        self
+    }
+
     /// Add another image field to form section.
     pub fn add_image_field(
         mut self,
         key: impl Into<String>,
         original_value: Option<impl Into<String>>,
     ) -> Self {
+        let value = original_value.map(|l| l.into());
         self.fields.push(DataField {
             key: key.into(),
             value: DataFieldValue::Image(ImageValue {
                 value: Value::new(None),
-                original_link: original_value.map(|link| Rc::new(link.into())),
+                original_link: value.map(Rc::new),
+                component_params: None,
             }),
         });
         self
@@ -193,4 +269,16 @@ impl DataSection {
         self.fieldset_style = fieldset_style;
         self
     }
+
+    /// Set [Css] for fields container for this section.
+    pub fn set_fieldset_css(mut self, fieldset_css: Css) -> Self {
+        self.fieldset_css = Some(fieldset_css);
+        self
+    }
+
+    /// This section starts a new section group (Form adds a horizontal rule)
+    pub fn starts_new_group(mut self) -> Self {
+        self.new_group = true;
+        self
+    }
 }
diff --git a/src/form/mod.rs b/src/form/mod.rs
index e2a0296..d97c786 100644
--- a/src/form/mod.rs
+++ b/src/form/mod.rs
@@ -6,22 +6,50 @@
 //! See story book for examples.
 
 use std::rc::Rc;
-use vertigo::{bind_rc, component, css, dom, Css};
+use vertigo::{AttrGroup, Css, Value, bind, bind_rc, component, css, dom, dom_element};
 
-use crate::{input::Input, DictSelect, DropImageFile, DropImageFileParams, Select};
+use crate::{
+    DictSelect, DropImageFile, Select, Switch, SwitchParams, ValidationErrors, input::Input,
+};
 
 mod field;
-pub use field::{DataFieldValue, FieldExport, FormExport};
+pub use field::{DataFieldValue, FieldExport, FormExport, ImageValue, TextAreaValue};
 mod form_data;
-pub use form_data::{DataField, DataSection, FieldsetStyle, FormData};
+pub use form_data::{ControlsConfig, DataField, DataSection, FieldsetStyle, FormData};
 
-pub struct FormParams {
+pub type ValidateFunc<T> = Rc<dyn Fn(&T, Value<ValidationErrors>) -> bool>;
+
+#[derive(Default, Clone, PartialEq)]
+pub enum Operation {
+    #[default]
+    None,
+    Saving,
+    Success,
+    Error(String),
+}
+
+#[derive(Clone)]
+pub struct FormParams<T>
+where
+    T: From<FormExport> + 'static,
+{
     pub css: Css,
     pub add_css: Css,
-    pub submit_label: String,
+    pub add_section_css: Css,
+    pub submit_label: Rc<String>,
+    pub on_delete: Option<Rc<dyn Fn()>>,
+    pub delete_label: Rc<String>,
+    pub validate: Option<ValidateFunc<T>>,
+    pub validation_errors: Value<ValidationErrors>,
+    pub operation: Value<Operation>,
+    pub saving_label: Rc<String>,
+    pub saved_label: Rc<String>,
 }
 
-impl Default for FormParams {
+impl<T> Default for FormParams<T>
+where
+    T: From<FormExport> + 'static,
+{
     fn default() -> Self {
         Self {
             css: css! { "
@@ -30,7 +58,15 @@ impl Default for FormParams {
                 gap: 5px;
             " },
             add_css: Css::default(),
-            submit_label: "Submit".to_string(),
+            add_section_css: Css::default(),
+            submit_label: Rc::new("Submit".to_string()),
+            on_delete: None,
+            delete_label: Rc::new("Delete".to_string()),
+            validate: None,
+            validation_errors: Default::default(),
+            operation: Default::default(),
+            saving_label: Rc::new("Saving...".to_string()),
+            saved_label: Rc::new("Saved".to_string()),
         }
     }
 }
@@ -41,25 +77,49 @@ pub fn Field<'a>(field: &'a DataField) {
         DataFieldValue::String(val) => {
             dom! { <Input input:name={&&field.key} value={val.value.clone()} /> }
         }
+        DataFieldValue::TextArea(val) => {
+            let on_input = bind!(val.value, |new_value: String| {
+                value.set(new_value);
+            });
+            let el =
+                dom_element! { <textarea name={&&field.key} {on_input}>{&val.value}</textarea> };
+            if let Some(rows) = val.rows {
+                el.add_attr("rows", rows);
+            }
+            if let Some(cols) = val.cols {
+                el.add_attr("cols", cols);
+            }
+            el.into()
+        }
         DataFieldValue::List(val) => {
             dom! { <Select value={val.value.clone()} options={&val.options} /> }
         }
+        DataFieldValue::Bool(val) => {
+            dom! {
+                <Switch i:name={&&field.key} value={&val.value} params={SwitchParams::checkbox()} />
+            }
+            // let key = field.key.clone();
+            // val.value.render_value(move |checked| {
+            //     let el = dom_element! { <input name={&key} type="checkbox" /> };
+            //     if checked {
+            //         el.add_attr("checked", "checked");
+            //     }
+            //     el.into()
+            // })
+        }
         DataFieldValue::Dict(val) => {
             dom! { <DictSelect value={val.value.clone()} options={&val.options} /> }
         }
         DataFieldValue::Image(val) => {
+            let params = val.component_params.clone().unwrap_or_default();
             dom! { <DropImageFile
                 item={val.value.clone()}
                 original_link={val.original_link.clone()}
-                params={DropImageFileParams {
-                    img_css: css! { "
-                        max-width: 400px;
-                        max-height: 350px;
-                    "},
-                    ..Default::default()
-                }}
+                {params}
             /> }
         }
+        DataFieldValue::Custom(val) => (val.render)(),
+        DataFieldValue::StaticCustom(render) => render(),
     }
 }
 
@@ -68,9 +128,16 @@ pub fn Field<'a>(field: &'a DataField) {
 /// A model needs to implement conversion to [FormData] and from [FormExport] to interoperate with this component.
 ///
 /// See [FormData] for description how to manage form structure.
+///
+/// Use `f` attribute group to pass anything to underlying <form> element (ex. `f:css="my_styles"`)
 #[component]
-pub fn ModelForm<'a, T>(model: &'a T, on_submit: Rc<dyn Fn(T)>, params: FormParams)
-where
+pub fn ModelForm<'a, T>(
+    model: &'a T,
+    on_submit: Rc<dyn Fn(T)>,
+    params: FormParams<T>,
+    f: AttrGroup,
+    s: AttrGroup,
+) where
     FormData: From<&'a T>,
     T: From<FormExport> + 'static,
 {
@@ -80,71 +147,201 @@ where
         on_submit(T::from(form_export));
     });
 
-    Form {
+    let mut form_component = Form {
         form_data,
         on_submit,
         params,
     }
-    .mount()
+    .into_component();
+
+    form_component.f = f;
+    form_component.s = s;
+
+    form_component.mount()
 }
 
 /// Renders a form for provided [FormData] that upon "Save" allows to grab updated fields from [FormExport].
 ///
 /// See [FormData] for description how to manage form structure.
+///
+/// Use `f` attribute group to pass anything to underlying <form> element (ex. `f:css="my_styles"`)
 #[component]
-pub fn Form(form_data: Rc<FormData>, on_submit: Rc<dyn Fn(FormExport)>, params: FormParams) {
+pub fn Form<T>(
+    form_data: Rc<FormData>,
+    on_submit: Rc<dyn Fn(FormExport)>,
+    params: FormParams<T>,
+    // form attrs
+    f: AttrGroup,
+    // section attrs
+    s: AttrGroup,
+) where
+    T: From<FormExport> + 'static,
+{
     let subgrid_css = css! {"
         display: grid;
         grid-template-columns: subgrid;
         grid-column: span 2 / span 2;
     "};
+    let section_css = subgrid_css.clone().extend(params.add_section_css.clone());
 
     let fieldset_flex_css = css! {"
         display: flex;
         gap: 5px;
     "};
 
-    let fields = form_data.sections.iter().map(|section| {
+    let validation_errors = params.validation_errors.clone();
+
+    let fields = form_data.sections.iter().flat_map(|section| {
+        let attrs = s.clone();
+        let custom_fieldset_css = section.fieldset_css.clone().unwrap_or_else(|| css! {""});
+
         if section.fields.len() > 1 {
             let mut values = vec![];
             for (i, field) in section.fields.iter().enumerate() {
                 if section.fieldset_style == FieldsetStyle::Dimensions && i > 0 {
                     values.push(dom! { <span>"x"</span> });
                 }
-                values.push(dom! { <Field {field} /> });
+                let val_error = {
+                    let field_key = field.key.to_owned();
+                    validation_errors.render_value_option(move |errs| {
+                        errs.get(&field_key).map(|err| dom! { <span>{err}</span> })
+                    })
+                };
+                values.push(dom! {
+                    <div css={css!{"display: flex; flex-flow: column nowrap;"}}>
+                        <Field {field} />
+                        <span css={css!{"color: red;"}}>{val_error}</span>
+                    </div>
+                });
             }
 
             let label = &section.label;
-            dom! {
-                <label css={&subgrid_css}>
+
+            let section_rendered = dom! {
+                <label css={&section_css} {..attrs}>
                     {label}
-                    <div css={&fieldset_flex_css}>
+                    <div css={&fieldset_flex_css} css={custom_fieldset_css}>
                         {..values}
                     </div>
                 </label>
+            };
+                // {..section.new_group.then(|| dom! { <hr css={css!{"width: 100%;"}}/> })}
+
+            if section.new_group {
+                vec![
+                    dom! {
+                        <hr css={css!{"width: 100%; grid-column: 1 / 3;"}}/>
+                    },
+                    section_rendered
+                ]
+            } else {
+                vec![
+                    section_rendered
+                ]
             }
         } else if let Some(field) = section.fields.first() {
-            dom! {
-                <label css={&subgrid_css}>
+            let val_error = {
+                let field_key = field.key.to_owned();
+                validation_errors.render_value_option(move |errs| {
+                    errs.get(&field_key).map(|err| dom! { <span>{err}</span> })
+                })
+            };
+            vec![dom! {
+                <label css={&section_css} {..attrs}>
                     {&section.label}
-                    <Field {field} />
+                    <div css={css!{"display: flex; flex-flow: column nowrap;"}}>
+                        <Field {field} />
+                        <span css={css!{"color: red;"}}>{val_error}</span>
+                    </div>
                 </label>
-            }
+            }]
         } else {
-            dom! { <p /> }
+            vec![dom! { <p /> }]
         }
     });
 
-    let on_submit = bind_rc!(form_data, || {
-        on_submit(form_data.export());
+    let controls = |params: &FormParams<T>, c_config: &ControlsConfig| {
+        let mut controls = vec![];
+
+        let ctrl_item_css = css! {"
+            margin: 5px;
+        "};
+
+        if c_config.submit {
+            controls.push(dom! {
+                <input css={&ctrl_item_css} type="submit" value={&params.submit_label} />
+            });
+        }
+        if c_config.delete
+            && let Some(on_click) = params.on_delete.clone()
+        {
+            controls.push(dom! {
+                <input css={&ctrl_item_css} type="submit" value={&params.delete_label} on_click={move |_| on_click()} />
+            });
+        }
+
+        let errors = validation_errors
+            .render_value_option(|errs| errs.get("submit").map(|err| dom! { <span>{err}</span> }));
+
+        let operation_str = bind!(
+            params.saving_label,
+            params.saved_label,
+            params.operation.render_value_option(move |oper| {
+                match oper {
+                    Operation::Saving => Some(&saving_label),
+                    Operation::Success => Some(&saved_label),
+                    _ => None,
+                }
+                .map(|operation_str| dom! { <span css={&ctrl_item_css}>{operation_str}</span> })
+            })
+        );
+
+        if controls.is_empty() {
+            None
+        } else {
+            let mut css_controls = css!("grid-column: span 2;");
+            if let Some(custom_css) = &c_config.css {
+                css_controls = css_controls.extend(custom_css.clone());
+            }
+            Some(dom! {
+                <div css={css_controls}>
+                    {..controls}
+                    {errors}
+                    {operation_str}
+                </div>
+            })
+        }
+    };
+
+    let top_controls = controls(&params, &form_data.top_controls);
+    let bottom_controls = controls(&params, &form_data.bottom_controls);
+
+    let on_submit = bind_rc!(form_data, validation_errors, || {
+        params.operation.set(Operation::Saving);
+        let model = form_data.export();
+        let valid = if let Some(validate) = &params.validate {
+            validate(&model.clone().into(), validation_errors.clone())
+        } else {
+            true
+        };
+        if valid {
+            on_submit(model);
+        }
+        // params.operation.change(|oper|
+        //     // Auto change operation value only if it was not modified by callback
+        //     if oper == &Operation::Saving {
+        //         *oper = Operation::Success;
+        //     }
+        // );
     });
 
     let form_css = params.css.extend(params.add_css.clone());
 
     dom! {
-        <form css={form_css} on_submit={on_submit}>
+        <form css={form_css} on_submit={on_submit} {..f}>
+            {..top_controls}
             {..fields}
-            <input type="submit" value={params.submit_label} />
+            {..bottom_controls}
         </form>
     }
 }
diff --git a/src/switch.rs b/src/switch.rs
index b43e9a1..54ef02e 100644
--- a/src/switch.rs
+++ b/src/switch.rs
@@ -1,4 +1,4 @@
-use vertigo::{bind, dom, transaction, DomNode, Value};
+use vertigo::{AttrGroup, bind, component, dom, transaction, Value};
 
 pub enum DisplayType {
     Button,
@@ -46,60 +46,52 @@ impl SwitchParams {
 ///     />
 /// };
 /// ```
-pub struct Switch {
-    pub value: Value<bool>,
-    pub params: SwitchParams,
-}
-
-impl Switch {
-    pub fn into_component(self) -> Self {
-        self
-    }
-
-    pub fn mount(self) -> DomNode {
-        let Self { value, params } = self;
-
-        let toggle = bind!(value, |_| transaction(|ctx| value.set(!value.get(ctx))));
-
-        match params.display_type {
-            DisplayType::Button => {
-                let symbol = value.map(move |value| {
-                    if value {
-                        params.on_symbol.clone()
-                    } else {
-                        params.off_symbol.clone()
-                    }
-                });
+#[component]
+pub fn Switch(
+    value: Value<bool>,
+    params: SwitchParams,
+    i: AttrGroup, // TODO: Use
+) {
+    let toggle = bind!(value, |_| transaction(|ctx| value.set(!value.get(ctx))));
 
-                dom! {
-                    <button on_click={toggle}>{symbol}</button>
+    match params.display_type {
+        DisplayType::Button => {
+            let symbol = value.map(move |value| {
+                if value {
+                    params.on_symbol.clone()
+                } else {
+                    params.off_symbol.clone()
                 }
+            });
+
+            dom! {
+                <button on_click={toggle} {..i}>{symbol}</button>
             }
-            DisplayType::CheckBox => {
-                let value_clone = value.clone();
-                value.render_value(move |value_inner| {
-                    let toggle = bind!(value_clone, |_| transaction(
-                        |ctx| value_clone.set(!value_clone.get(ctx))
-                    ));
-                    if value_inner {
-                        dom! {
-                            <input type="checkbox" on_click={toggle} checked="checked" />
-                        }
-                    } else {
-                        dom! {
-                            <input type="checkbox" on_click={toggle} />
-                        }
+        }
+        DisplayType::CheckBox => {
+            let value_clone = value.clone();
+            value.render_value(move |value_inner| {
+                let toggle = bind!(value_clone, |_| transaction(
+                    |ctx| value_clone.set(!value_clone.get(ctx))
+                ));
+                if value_inner {
+                    dom! {
+                        <input type="checkbox" on_click={toggle} checked="checked" />
                     }
-                })
+                } else {
+                    dom! {
+                        <input type="checkbox" on_click={toggle} />
+                    }
+                }
+            })
 
-                // Following doesn't work as browsers reads attribute 'checked' only on first render
-                // let checked = value.map(move |value|
-                //     if value { Some("checked".to_string()) } else { None }
-                // );
-                // dom! {
-                //     <input type="checkbox" on_click={toggle} checked={checked} />
-                // }
-            }
+            // Following doesn't work as browsers reads attribute 'checked' only on first render
+            // let checked = value.map(move |value|
+            //     if value { Some("checked".to_string()) } else { None }
+            // );
+            // dom! {
+            //     <input type="checkbox" on_click={toggle} checked={checked} />
+            // }
         }
     }
 }
diff --git a/storybook/src/form.rs b/storybook/src/form.rs
index 819372b..e667b83 100644
--- a/storybook/src/form.rs
+++ b/storybook/src/form.rs
@@ -1,3 +1,5 @@
+use std::rc::Rc;
+
 use vertigo::{bind_rc, component, css, dom, DomNode, Value};
 use vertigo_forms::form::{
     DataSection, FieldsetStyle, FormData, FormExport, FormParams, ModelForm,
@@ -31,6 +33,7 @@ impl From<&MyModel> for FormData {
                     .add_string_field("dimension_y", &value.dimension_y)
                     .set_fieldset_style(FieldsetStyle::Dimensions),
             )
+            .add_bottom_controls()
     }
 }
 
@@ -130,19 +133,25 @@ impl From<&MySecondModel> for FormData {
         ]
         .into();
 
-        Self {
-            sections: vec![
-                DataSection::with_string_field("First Name", "first_name", &value.first_name),
-                DataSection::with_string_field("Surname", "surname", &value.surname),
-                DataSection::new("Gender").add_list_field(
-                    "gender",
-                    value.gender.to_string(),
-                    gender_map,
-                ),
-                DataSection::new("Role").add_dict_field("role", value.role, role_map),
-                DataSection::new("Photo").add_image_field("photo", Some(&value.photo)),
-            ],
-        }
+        Self::default()
+            .with(DataSection::with_string_field(
+                "First Name",
+                "first_name",
+                &value.first_name,
+            ))
+            .with(DataSection::with_string_field(
+                "Surname",
+                "surname",
+                &value.surname,
+            ))
+            .with(DataSection::new("Gender").add_list_field(
+                "gender",
+                Some(value.gender.to_string()),
+                gender_map,
+            ))
+            .with(DataSection::new("Role").add_dict_field("role", Some(value.role), role_map))
+            .with(DataSection::new("Photo").add_image_field("photo", Some(&value.photo)))
+            .add_bottom_controls()
     }
 }
 
@@ -151,7 +160,7 @@ impl From<FormExport> for MySecondModel {
         Self {
             first_name: form_export.get_string("first_name"),
             surname: form_export.get_string("surname"),
-            gender: Gender::from(form_export.list_or_default("gender")),
+            gender: form_export.list_or_default("gender"),
             role: form_export.dict_or_default("role"),
             photo: form_export.image_url("photo"),
         }
@@ -180,7 +189,7 @@ pub fn Form2() {
                 {on_submit}
                 params={FormParams {
                     add_css: css! {"width: 400px;"},
-                    submit_label: "Apply".to_string(),
+                    submit_label: Rc::new("Apply".to_string()),
                     ..Default::default()
                 }}
             />

From d2d9027687055bddfed21269c1b77437e4724b23 Mon Sep 17 00:00:00 2001
From: Michal Pokrywka <wolfmoon@o2.pl>
Date: Tue, 2 Sep 2025 15:16:45 +0200
Subject: [PATCH 4/4] Tabbed form

---
 README.md                                |   4 +-
 src/drop_image_file.rs                   |  10 +-
 src/form/data/data_field.rs              | 103 +++++++++++
 src/form/{ => data}/form_data.rs         |  78 +++++++-
 src/form/data/form_export.rs             | 145 +++++++++++++++
 src/form/data/mod.rs                     |  30 +++
 src/form/field.rs                        | 224 -----------------------
 src/form/mod.rs                          | 206 +++++----------------
 src/form/render/field.rs                 |  81 ++++++++
 src/form/render/fields.rs                |  74 ++++++++
 src/form/render/mod.rs                   |   8 +
 src/form/render/tabs.rs                  |  56 ++++++
 src/input/input.rs                       |   2 +-
 src/input/input_with_button.rs           |   2 +-
 src/input/list_input.rs                  |   2 +-
 src/lib.rs                               |   4 +-
 src/login.rs                             |  11 +-
 src/popup.rs                             |  18 +-
 src/search_panel.rs                      |   2 +-
 src/select/dict_select.rs                |  10 +-
 src/select/multi_drop_down.rs            |   6 +-
 src/select/multi_select.rs               |   2 +-
 src/select/select.rs                     |  12 +-
 src/select_search.rs                     |   4 +-
 src/switch.rs                            |   2 +-
 src/tabs/mod.rs                          |  58 +++---
 src/with_loader.rs                       |   2 +-
 storybook/src/form/form1.rs              |  77 ++++++++
 storybook/src/{form.rs => form/form2.rs} |  95 +---------
 storybook/src/form/mod.rs                |  44 +++++
 storybook/src/form/tabbed_form.rs        |  88 +++++++++
 storybook/src/lib.rs                     |  41 +++--
 storybook/src/tabs.rs                    |   6 +-
 33 files changed, 924 insertions(+), 583 deletions(-)
 create mode 100644 src/form/data/data_field.rs
 rename src/form/{ => data}/form_data.rs (74%)
 create mode 100644 src/form/data/form_export.rs
 create mode 100644 src/form/data/mod.rs
 delete mode 100644 src/form/field.rs
 create mode 100644 src/form/render/field.rs
 create mode 100644 src/form/render/fields.rs
 create mode 100644 src/form/render/mod.rs
 create mode 100644 src/form/render/tabs.rs
 create mode 100644 storybook/src/form/form1.rs
 rename storybook/src/{form.rs => form/form2.rs} (57%)
 create mode 100644 storybook/src/form/mod.rs
 create mode 100644 storybook/src/form/tabbed_form.rs

diff --git a/README.md b/README.md
index 3dce120..5c9748e 100644
--- a/README.md
+++ b/README.md
@@ -9,14 +9,14 @@ Blocks for building forms in [vertigo](https://crates.io/crates/vertigo).
 [![CI](https://github.com/vertigo-web/vertigo-forms/actions/workflows/pipeline.yaml/badge.svg)](https://github.com/vertigo-web/vertigo-forms/actions/workflows/pipeline.yaml)
 [![downloads](https://img.shields.io/crates/d/vertigo-forms.svg)](https://crates.io/crates/vertigo-forms)
 
-See [Changelog](https://github.com/vertigo-web/vertigo/blob/master/CHANGES.md) for recent features.
+See [Changelog](https://github.com/vertigo-web/vertigo-forms/blob/master/CHANGES.md) for recent features.
 
 ## Example
 
 Dependencies:
 
 ```toml
-vertigo = "0.7"
+vertigo = "0.8"
 vertigo-forms = { git = "https://github.com/vertigo-web/vertigo-forms" }
 ```
 
diff --git a/src/drop_image_file.rs b/src/drop_image_file.rs
index ae63916..156c64f 100644
--- a/src/drop_image_file.rs
+++ b/src/drop_image_file.rs
@@ -1,7 +1,7 @@
-use base64::{engine::general_purpose::STANDARD_NO_PAD as BASE_64, Engine as _};
+use base64::{Engine as _, engine::general_purpose::STANDARD_NO_PAD as BASE_64};
 use std::rc::Rc;
 use vertigo::{
-    bind, computed_tuple, css, dom, Computed, Css, DomNode, DropFileEvent, DropFileItem, Value,
+    Computed, Css, DomNode, DropFileEvent, DropFileItem, Value, bind, computed_tuple, css, dom,
 };
 
 /// Box that allows to accept image files on it, connected to `Value<Option<DropFileItem>>`.
@@ -112,11 +112,7 @@ impl DropImageFile {
             }
         };
 
-        let dropzone_css = self
-            .params
-            .dropzone_css
-            .clone()
-            .extend(self.params.dropzone_add_css.clone());
+        let dropzone_css = &self.params.dropzone_css + &self.params.dropzone_add_css;
 
         dom! {
             <div css={dropzone_css} on_dropfile={on_dropfile}>
diff --git a/src/form/data/data_field.rs b/src/form/data/data_field.rs
new file mode 100644
index 0000000..ea54d47
--- /dev/null
+++ b/src/form/data/data_field.rs
@@ -0,0 +1,103 @@
+use std::{collections::HashMap, rc::Rc};
+use vertigo::{Computed, Context, DomNode, DropFileItem, Value};
+
+use crate::DropImageFileParams;
+
+use super::form_export::FieldExport;
+
+/// Value of a field in form section.
+#[derive(Clone)]
+pub enum DataFieldValue {
+    /// Regular string field.
+    String(StringValue),
+    /// Textarea string field.
+    TextArea(TextAreaValue),
+    /// String field with options.
+    List(ListValue),
+    /// Integer (foreign key) field with labels for each integer.
+    Dict(DictValue),
+    /// Array of integers (foreign key) field with labels for each integer.
+    Multi(MultiValue),
+    /// Checkbox
+    Bool(BoolValue),
+    /// Image (bytes) field.
+    Image(ImageValue),
+    /// Custom field
+    Custom(CustomValue),
+    /// Custom component without value
+    StaticCustom(Rc<dyn Fn() -> DomNode>),
+}
+
+impl DataFieldValue {
+    pub fn export(&self, ctx: &Context) -> FieldExport {
+        match self {
+            Self::String(val) => FieldExport::String(val.value.get(ctx)),
+            Self::TextArea(val) => FieldExport::String(val.value.get(ctx)),
+            Self::List(val) => FieldExport::List(val.value.get(ctx)),
+            Self::Dict(val) => FieldExport::Dict(val.value.get(ctx)),
+            Self::Multi(val) => {
+                FieldExport::Multi(val.value.get(ctx).iter().map(|v| v.get(ctx)).collect())
+            }
+            Self::Bool(val) => FieldExport::Bool(val.value.get(ctx)),
+            Self::Image(val) => FieldExport::Image((val.original_link.clone(), val.value.get(ctx))),
+            Self::Custom(val) => FieldExport::String(val.value.get(ctx)),
+            Self::StaticCustom(_) => FieldExport::String("".to_string()),
+        }
+    }
+}
+
+#[derive(Clone)]
+pub struct StringValue {
+    pub value: Value<String>,
+    pub original_value: Rc<String>,
+}
+
+#[derive(Clone)]
+pub struct TextAreaValue {
+    pub value: Value<String>,
+    pub original_value: Option<Rc<String>>,
+    pub rows: Option<i32>,
+    pub cols: Option<i32>,
+}
+
+#[derive(Clone)]
+pub struct ListValue {
+    pub value: Value<String>,
+    pub original_value: Option<Rc<String>>,
+    pub options: Computed<Vec<String>>,
+}
+
+#[derive(Clone)]
+pub struct DictValue {
+    pub value: Value<i64>,
+    pub original_value: Option<Rc<i64>>,
+    pub options: Computed<Vec<(i64, String)>>,
+}
+
+#[derive(Clone)]
+pub struct MultiValue {
+    pub value: Value<Vec<Value<i64>>>,
+    pub original_value: Rc<Vec<i64>>,
+    pub options: Computed<HashMap<i64, String>>,
+    pub add_label: Rc<String>,
+}
+
+#[derive(Clone)]
+pub struct BoolValue {
+    pub value: Value<bool>,
+    pub original_value: Option<Rc<bool>>,
+}
+
+#[derive(Clone)]
+pub struct ImageValue {
+    pub value: Value<Option<DropFileItem>>,
+    pub original_link: Option<Rc<String>>,
+    pub component_params: Option<DropImageFileParams>,
+}
+
+#[derive(Clone)]
+pub struct CustomValue {
+    pub value: Value<String>,
+    pub original_value: Option<Rc<String>>,
+    pub render: Rc<dyn Fn() -> DomNode>,
+}
diff --git a/src/form/form_data.rs b/src/form/data/form_data.rs
similarity index 74%
rename from src/form/form_data.rs
rename to src/form/data/form_data.rs
index a246332..43afe91 100644
--- a/src/form/form_data.rs
+++ b/src/form/data/form_data.rs
@@ -1,11 +1,9 @@
 use std::{collections::HashMap, rc::Rc};
-use vertigo::{transaction, Computed, Css, DomElement, Value};
-
-use crate::form::field::BoolValue;
+use vertigo::{Computed, Css, DomElement, Value, transaction};
 
 use super::{
-    field::{DictValue, ImageValue, ListValue, StringValue},
     DataFieldValue, FormExport,
+    data_field::{BoolValue, DictValue, ImageValue, ListValue, MultiValue, StringValue},
 };
 
 /// Used to define structure of a [Form](super::Form).
@@ -41,6 +39,7 @@ use super::{
 #[derive(Default)]
 pub struct FormData {
     pub sections: Vec<DataSection>,
+    pub tabs: Vec<(String, Rc<Vec<DataSection>>)>,
     pub top_controls: ControlsConfig,
     pub bottom_controls: ControlsConfig,
 }
@@ -68,12 +67,18 @@ impl ControlsConfig {
 }
 
 impl FormData {
-    /// Add new data section
+    /// Add new data section (outside of tabs)
     pub fn with(mut self, section: DataSection) -> Self {
         self.sections.push(section);
         self
     }
 
+    /// Add new tab with sections
+    pub fn add_tab(mut self, tab_label: impl Into<String>, sections: Vec<DataSection>) -> Self {
+        self.tabs.push((tab_label.into(), Rc::new(sections)));
+        self
+    }
+
     pub fn add_top_controls(mut self) -> Self {
         self.top_controls = ControlsConfig::full();
         self
@@ -97,6 +102,13 @@ impl FormData {
     pub fn export(&self) -> FormExport {
         let mut hash_map = HashMap::new();
         transaction(|ctx| {
+            for (_, sections) in &self.tabs {
+                for section in sections.iter() {
+                    for field in &section.fields {
+                        hash_map.insert(field.key.clone(), field.value.export(ctx));
+                    }
+                }
+            }
             for section in &self.sections {
                 for field in &section.fields {
                     hash_map.insert(field.key.clone(), field.value.export(ctx));
@@ -165,6 +177,15 @@ impl DataSection {
         }
     }
 
+    /// Create a new form section with single optional string field.
+    pub fn with_opt_string_field(
+        label: impl Into<String>,
+        key: impl Into<String>,
+        original_value: &Option<String>,
+    ) -> Self {
+        Self::with_string_field(label, key, original_value.clone().unwrap_or_default())
+    }
+
     pub fn add_field(mut self, key: impl Into<String>, value: DataFieldValue) -> Self {
         self.fields.push(DataField {
             key: key.into(),
@@ -190,6 +211,15 @@ impl DataSection {
         self
     }
 
+    /// Add another optional string field to form section (text input).
+    pub fn add_opt_string_field(
+        self,
+        key: impl Into<String>,
+        original_value: &Option<String>,
+    ) -> Self {
+        self.add_string_field(key, original_value.clone().unwrap_or_default())
+    }
+
     /// Add another list field to form section (dropdown with options).
     pub fn add_list_field(
         mut self,
@@ -210,14 +240,26 @@ impl DataSection {
         self
     }
 
-    /// Add another dict field to form section (dropdown with options, value stored as integer).
-    pub fn add_dict_field(
-        mut self,
+    /// Add another dict field to form section based on static (non-reactive) dictionary
+    /// Renders dropdown with options, value are stored as integer.
+    pub fn add_static_dict_field(
+        self,
         key: impl Into<String>,
         original_value: Option<i64>,
         options: Vec<(i64, String)>,
     ) -> Self {
         let options = Computed::from(move |_ctx| options.clone());
+        self.add_dict_field(key, original_value, options)
+    }
+
+    /// Add another dict field to form section based on reactive dictionary
+    /// Renders dropdown with options, value are stored as integer.
+    pub fn add_dict_field(
+        mut self,
+        key: impl Into<String>,
+        original_value: Option<i64>,
+        options: Computed<Vec<(i64, String)>>,
+    ) -> Self {
         self.fields.push(DataField {
             key: key.into(),
             value: DataFieldValue::Dict(DictValue {
@@ -229,6 +271,26 @@ impl DataSection {
         self
     }
 
+    /// Add multiselect field to form section (multiple search inputs, value stored as integer).
+    pub fn add_multiselect_field(
+        mut self,
+        key: impl Into<String>,
+        original_value: Vec<i64>,
+        options: Computed<HashMap<i64, String>>,
+        add_label: impl Into<String>,
+    ) -> Self {
+        self.fields.push(DataField {
+            key: key.into(),
+            value: DataFieldValue::Multi(MultiValue {
+                value: Value::new(original_value.iter().cloned().map(Value::new).collect()),
+                original_value: Rc::new(original_value),
+                options,
+                add_label: Rc::new(add_label.into()),
+            }),
+        });
+        self
+    }
+
     /// Add another bool field to form section (checkbox input).
     pub fn add_bool_field(
         mut self,
diff --git a/src/form/data/form_export.rs b/src/form/data/form_export.rs
new file mode 100644
index 0000000..5669b91
--- /dev/null
+++ b/src/form/data/form_export.rs
@@ -0,0 +1,145 @@
+use std::{collections::HashMap, rc::Rc};
+use vertigo::DropFileItem;
+
+use crate::{image_as_uri, nonify};
+
+pub enum FieldExport {
+    Bool(bool),
+    String(String),
+    List(String),
+    Dict(i64),
+    Multi(Vec<i64>),
+    Image((Option<Rc<String>>, Option<DropFileItem>)),
+}
+
+/// After form is submitted, it generates an export from every field. This can be used to construct a new model.
+#[derive(Clone)]
+pub struct FormExport(Rc<HashMap<String, FieldExport>>);
+
+impl FormExport {
+    pub fn new(map: HashMap<String, FieldExport>) -> Self {
+        Self(Rc::new(map))
+    }
+
+    pub fn get<'a>(&'a self, key: &str) -> Option<&'a FieldExport> {
+        self.0.get(key)
+    }
+
+    /// Get value from string input.
+    pub fn get_string(&self, key: &str) -> String {
+        self.get_string_opt(key).unwrap_or_default()
+    }
+
+    /// Get value from string input or None if empty.
+    pub fn get_string_opt(&self, key: &str) -> Option<String> {
+        self.get(key).and_then(|export| {
+            if let FieldExport::String(val) = export {
+                nonify(val.clone())
+            } else {
+                None
+            }
+        })
+    }
+
+    // Get optional value from list field (string-based).
+    pub fn list<T: From<String>>(&self, key: &str) -> Option<T> {
+        self.get(key).and_then(|export| {
+            if let FieldExport::List(val) = export {
+                nonify(val.clone()).map(Into::into)
+            } else {
+                None
+            }
+        })
+    }
+    // Get value from list field (string-based) or default.
+    pub fn list_or_default<T: Default + From<String>>(&self, key: &str) -> T {
+        self.list(key).unwrap_or_default()
+    }
+
+    // Get value from dict field (i64-based).
+    pub fn dict_or_default<T: From<i64>>(&self, key: &str) -> T {
+        self.get(key)
+            .map(|export| {
+                if let FieldExport::Dict(val) = export {
+                    *val
+                } else {
+                    Default::default()
+                }
+            })
+            .unwrap_or_default()
+            .into()
+    }
+
+    // Get values from multi field (i64-based).
+    pub fn multi<T: From<i64>>(&self, key: &str) -> Vec<T> {
+        self.get(key)
+            .map(|export| {
+                if let FieldExport::Multi(val) = export {
+                    val.iter().cloned().map(Into::into).collect()
+                } else {
+                    Default::default()
+                }
+            })
+            .unwrap_or_default()
+    }
+
+    /// Get value from bool input (i. e. checkbox) or false.
+    pub fn get_bool(&self, key: &str) -> bool {
+        self.get_bool_opt(key).unwrap_or_default()
+    }
+
+    /// Get value from bool input (i. e. checkbox) or None.
+    pub fn get_bool_opt(&self, key: &str) -> Option<bool> {
+        self.get(key).and_then(|export| {
+            if let FieldExport::Bool(val) = export {
+                Some(*val)
+            } else {
+                None
+            }
+        })
+    }
+
+    // Get new image (base64) or original value from image field.
+    pub fn image_url(&self, key: &str) -> String {
+        self.image_url_opt(key).unwrap_or_default()
+    }
+
+    // Get new image (base64) or original value from image field or none.
+    pub fn image_url_opt(&self, key: &str) -> Option<String> {
+        if let Some(export) = self.get(key) {
+            match export {
+                FieldExport::Image((orig_link, dfi)) => dfi
+                    .as_ref()
+                    .map(image_as_uri)
+                    .or_else(|| orig_link.as_ref().map(|ol| ol.to_string())),
+                _ => None,
+            }
+        } else {
+            None
+        }
+    }
+
+    // Get new image (base64)
+    pub fn image_item_opt(&self, key: &str) -> Option<DropFileItem> {
+        if let Some(export) = self.get(key) {
+            match export {
+                FieldExport::Image((_orig_link, dfi)) => dfi.clone(),
+                _ => None,
+            }
+        } else {
+            None
+        }
+    }
+
+    // Get original image url
+    pub fn image_orig_url_opt(&self, key: &str) -> Option<Rc<String>> {
+        if let Some(export) = self.get(key) {
+            match export {
+                FieldExport::Image((orig_link, _dfi)) => orig_link.clone(),
+                _ => None,
+            }
+        } else {
+            None
+        }
+    }
+}
diff --git a/src/form/data/mod.rs b/src/form/data/mod.rs
new file mode 100644
index 0000000..b6eea43
--- /dev/null
+++ b/src/form/data/mod.rs
@@ -0,0 +1,30 @@
+use std::rc::Rc;
+use vertigo::Value;
+
+use crate::ValidationErrors;
+
+mod data_field;
+pub use data_field::{DataFieldValue, ImageValue, TextAreaValue};
+
+mod form_export;
+pub use form_export::{FieldExport, FormExport};
+
+mod form_data;
+pub use form_data::{ControlsConfig, DataField, DataSection, FieldsetStyle, FormData};
+
+pub type ValidateFunc<T> = Rc<dyn Fn(&T, Value<ValidationErrors>) -> bool>;
+
+#[derive(Default, Clone, PartialEq)]
+pub enum Operation {
+    #[default]
+    None,
+    Saving,
+    Success,
+    Error(Rc<String>),
+}
+
+impl Operation {
+    pub fn err(message: impl Into<String>) -> Self {
+        Self::Error(Rc::new(message.into()))
+    }
+}
diff --git a/src/form/field.rs b/src/form/field.rs
deleted file mode 100644
index 633146c..0000000
--- a/src/form/field.rs
+++ /dev/null
@@ -1,224 +0,0 @@
-use std::{collections::HashMap, rc::Rc};
-use vertigo::{Computed, Context, DomNode, DropFileItem, Value};
-
-use crate::{image_as_uri, nonify, DropImageFileParams};
-
-#[derive(Clone)]
-pub struct StringValue {
-    pub value: Value<String>,
-    pub original_value: Rc<String>,
-}
-
-#[derive(Clone)]
-pub struct TextAreaValue {
-    pub value: Value<String>,
-    pub original_value: Option<Rc<String>>,
-    pub rows: Option<i32>,
-    pub cols: Option<i32>,
-}
-
-#[derive(Clone)]
-pub struct ListValue {
-    pub value: Value<String>,
-    pub original_value: Option<Rc<String>>,
-    pub options: Computed<Vec<String>>,
-}
-
-#[derive(Clone)]
-pub struct DictValue {
-    pub value: Value<i64>,
-    pub original_value: Option<Rc<i64>>,
-    pub options: Computed<Vec<(i64, String)>>,
-}
-
-#[derive(Clone)]
-pub struct BoolValue {
-    pub value: Value<bool>,
-    pub original_value: Option<Rc<bool>>,
-}
-
-#[derive(Clone)]
-pub struct ImageValue {
-    pub value: Value<Option<DropFileItem>>,
-    pub original_link: Option<Rc<String>>,
-    pub component_params: Option<DropImageFileParams>,
-}
-
-#[derive(Clone)]
-pub struct CustomValue {
-    pub value: Value<String>,
-    pub original_value: Option<Rc<String>>,
-    pub render: Rc<dyn Fn() -> DomNode>,
-}
-
-/// Value of a field in form section.
-#[derive(Clone)]
-pub enum DataFieldValue {
-    /// Regular string field.
-    String(StringValue),
-    /// Textarea string field.
-    TextArea(TextAreaValue),
-    /// String field with options.
-    List(ListValue),
-    /// Integer (foreign key) field with labels for each integer.
-    Dict(DictValue),
-    /// Checkbox
-    Bool(BoolValue),
-    /// Image (bytes) field.
-    Image(ImageValue),
-    /// Custom field
-    Custom(CustomValue),
-    /// Custom component without value
-    StaticCustom(Rc<dyn Fn() -> DomNode>)
-}
-
-impl DataFieldValue {
-    pub fn export(&self, ctx: &Context) -> FieldExport {
-        match self {
-            Self::String(val) => FieldExport::String(val.value.get(ctx)),
-            Self::TextArea(val) => FieldExport::String(val.value.get(ctx)),
-            Self::List(val) => FieldExport::List(val.value.get(ctx)),
-            Self::Dict(val) => FieldExport::Dict(val.value.get(ctx)),
-            Self::Bool(val) => FieldExport::Bool(val.value.get(ctx)),
-            Self::Image(val) => FieldExport::Image((val.original_link.clone(), val.value.get(ctx))),
-            Self::Custom(val) => FieldExport::String(val.value.get(ctx)),
-            Self::StaticCustom(_) => FieldExport::String("".to_string())
-        }
-    }
-}
-
-pub enum FieldExport {
-    Bool(bool),
-    String(String),
-    List(String),
-    Dict(i64),
-    Image((Option<Rc<String>>, Option<DropFileItem>)),
-}
-
-/// After form is submitted, it generates an export from every field. This can be used to construct a new model.
-#[derive(Clone)]
-pub struct FormExport(Rc<HashMap<String, FieldExport>>);
-
-impl FormExport {
-    pub fn new(map: HashMap<String, FieldExport>) -> Self {
-        Self(Rc::new(map))
-    }
-
-    pub fn get<'a>(&'a self, key: &str) -> Option<&'a FieldExport> {
-        self.0.get(key)
-    }
-
-    /// Get value from string input.
-    pub fn get_string(&self, key: &str) -> String {
-        self.get_string_opt(key)
-            .unwrap_or_default()
-    }
-
-    /// Get value from string input or None if empty.
-    pub fn get_string_opt(&self, key: &str) -> Option<String> {
-        self.get(key)
-            .and_then(|export| {
-                if let FieldExport::String(val) = export {
-                    nonify(val.clone())
-                } else {
-                    None
-                }
-            })
-    }
-
-    // Get value from list field (string-based).
-    pub fn list_or_default<T: From<String>>(&self, key: &str) -> T {
-        self.get(key)
-            .map(|export| {
-                if let FieldExport::List(val) = export {
-                    val.clone()
-                } else {
-                    Default::default()
-                }
-            })
-            .unwrap_or_default()
-            .into()
-    }
-
-    // Get value from dict field (i64-based).
-    pub fn dict_or_default<T: From<i64>>(&self, key: &str) -> T {
-        self.get(key)
-            .map(|export| {
-                if let FieldExport::Dict(val) = export {
-                    *val
-                } else {
-                    Default::default()
-                }
-            })
-            .unwrap_or_default()
-            .into()
-    }
-
-    /// Get value from bool input (i. e. checkbox) or false.
-    pub fn get_bool(&self, key: &str) -> bool {
-        self.get_bool_opt(key).unwrap_or_default()
-    }
-
-    /// Get value from bool input (i. e. checkbox) or None.
-    pub fn get_bool_opt(&self, key: &str) -> Option<bool> {
-        self.get(key)
-            .and_then(|export| {
-                if let FieldExport::Bool(val) = export {
-                    Some(*val)
-                } else {
-                    None
-                }
-            })
-    }
-
-    // Get new image (base64) or original value from image field.
-    pub fn image_url(&self, key: &str) -> String {
-        self.image_url_opt(key).unwrap_or_default()
-    }
-
-    // Get new image (base64) or original value from image field or none.
-    pub fn image_url_opt(&self, key: &str) -> Option<String> {
-        if let Some(export) = self.get(key) {
-            match export {
-                FieldExport::Image((orig_link, dfi)) => {
-                    dfi.as_ref().map(image_as_uri).or_else(|| {
-                        orig_link
-                            .as_ref()
-                            .map(|ol| ol.to_string())
-                    })
-                }
-                _ => None,
-            }
-        } else {
-            None
-        }
-    }
-
-    // Get new image (base64)
-    pub fn image_item_opt(&self, key: &str) -> Option<DropFileItem> {
-        if let Some(export) = self.get(key) {
-            match export {
-                FieldExport::Image((_orig_link, dfi)) => {
-                    dfi.clone()
-                }
-                _ => None,
-            }
-        } else {
-            None
-        }
-    }
-
-    // Get original image url
-    pub fn image_orig_url_opt(&self, key: &str) -> Option<String> {
-        if let Some(export) = self.get(key) {
-            match export {
-                FieldExport::Image((orig_link, _dfi)) => {
-                    orig_link.as_deref().map(|s| s.to_string())
-                }
-                _ => None,
-            }
-        } else {
-            None
-        }
-    }
-}
diff --git a/src/form/mod.rs b/src/form/mod.rs
index d97c786..f48f637 100644
--- a/src/form/mod.rs
+++ b/src/form/mod.rs
@@ -6,33 +6,18 @@
 //! See story book for examples.
 
 use std::rc::Rc;
-use vertigo::{AttrGroup, Css, Value, bind, bind_rc, component, css, dom, dom_element};
+use vertigo::{AttrGroup, Css, Value, bind, bind_rc, component, css, dom};
 
-use crate::{
-    DictSelect, DropImageFile, Select, Switch, SwitchParams, ValidationErrors, input::Input,
-};
+use crate::{TabsParams, ValidationErrors};
 
-mod field;
-pub use field::{DataFieldValue, FieldExport, FormExport, ImageValue, TextAreaValue};
-mod form_data;
-pub use form_data::{ControlsConfig, DataField, DataSection, FieldsetStyle, FormData};
+mod data;
+pub use data::*;
 
-pub type ValidateFunc<T> = Rc<dyn Fn(&T, Value<ValidationErrors>) -> bool>;
-
-#[derive(Default, Clone, PartialEq)]
-pub enum Operation {
-    #[default]
-    None,
-    Saving,
-    Success,
-    Error(String),
-}
+mod render;
+pub use render::*;
 
 #[derive(Clone)]
-pub struct FormParams<T>
-where
-    T: From<FormExport> + 'static,
-{
+pub struct FormParams<T: 'static> {
     pub css: Css,
     pub add_css: Css,
     pub add_section_css: Css,
@@ -44,12 +29,10 @@ where
     pub operation: Value<Operation>,
     pub saving_label: Rc<String>,
     pub saved_label: Rc<String>,
+    pub tabs_params: Option<TabsParams>,
 }
 
-impl<T> Default for FormParams<T>
-where
-    T: From<FormExport> + 'static,
-{
+impl<T: 'static> Default for FormParams<T> {
     fn default() -> Self {
         Self {
             css: css! { "
@@ -67,62 +50,11 @@ where
             operation: Default::default(),
             saving_label: Rc::new("Saving...".to_string()),
             saved_label: Rc::new("Saved".to_string()),
+            tabs_params: None,
         }
     }
 }
 
-#[component]
-pub fn Field<'a>(field: &'a DataField) {
-    match &field.value {
-        DataFieldValue::String(val) => {
-            dom! { <Input input:name={&&field.key} value={val.value.clone()} /> }
-        }
-        DataFieldValue::TextArea(val) => {
-            let on_input = bind!(val.value, |new_value: String| {
-                value.set(new_value);
-            });
-            let el =
-                dom_element! { <textarea name={&&field.key} {on_input}>{&val.value}</textarea> };
-            if let Some(rows) = val.rows {
-                el.add_attr("rows", rows);
-            }
-            if let Some(cols) = val.cols {
-                el.add_attr("cols", cols);
-            }
-            el.into()
-        }
-        DataFieldValue::List(val) => {
-            dom! { <Select value={val.value.clone()} options={&val.options} /> }
-        }
-        DataFieldValue::Bool(val) => {
-            dom! {
-                <Switch i:name={&&field.key} value={&val.value} params={SwitchParams::checkbox()} />
-            }
-            // let key = field.key.clone();
-            // val.value.render_value(move |checked| {
-            //     let el = dom_element! { <input name={&key} type="checkbox" /> };
-            //     if checked {
-            //         el.add_attr("checked", "checked");
-            //     }
-            //     el.into()
-            // })
-        }
-        DataFieldValue::Dict(val) => {
-            dom! { <DictSelect value={val.value.clone()} options={&val.options} /> }
-        }
-        DataFieldValue::Image(val) => {
-            let params = val.component_params.clone().unwrap_or_default();
-            dom! { <DropImageFile
-                item={val.value.clone()}
-                original_link={val.original_link.clone()}
-                {params}
-            /> }
-        }
-        DataFieldValue::Custom(val) => (val.render)(),
-        DataFieldValue::StaticCustom(render) => render(),
-    }
-}
-
 /// Renders a form for provided model, that upon "Save" allows to update a model with new values.
 ///
 /// A model needs to implement conversion to [FormData] and from [FormExport] to interoperate with this component.
@@ -165,6 +97,7 @@ pub fn ModelForm<'a, T>(
 /// See [FormData] for description how to manage form structure.
 ///
 /// Use `f` attribute group to pass anything to underlying <form> element (ex. `f:css="my_styles"`)
+/// Use `s` attribute group to pass anything to underlying section (<label> element) (ex. `s:css="my_styles"`)
 #[component]
 pub fn Form<T>(
     form_data: Rc<FormData>,
@@ -182,84 +115,9 @@ pub fn Form<T>(
         grid-template-columns: subgrid;
         grid-column: span 2 / span 2;
     "};
-    let section_css = subgrid_css.clone().extend(params.add_section_css.clone());
-
-    let fieldset_flex_css = css! {"
-        display: flex;
-        gap: 5px;
-    "};
 
     let validation_errors = params.validation_errors.clone();
 
-    let fields = form_data.sections.iter().flat_map(|section| {
-        let attrs = s.clone();
-        let custom_fieldset_css = section.fieldset_css.clone().unwrap_or_else(|| css! {""});
-
-        if section.fields.len() > 1 {
-            let mut values = vec![];
-            for (i, field) in section.fields.iter().enumerate() {
-                if section.fieldset_style == FieldsetStyle::Dimensions && i > 0 {
-                    values.push(dom! { <span>"x"</span> });
-                }
-                let val_error = {
-                    let field_key = field.key.to_owned();
-                    validation_errors.render_value_option(move |errs| {
-                        errs.get(&field_key).map(|err| dom! { <span>{err}</span> })
-                    })
-                };
-                values.push(dom! {
-                    <div css={css!{"display: flex; flex-flow: column nowrap;"}}>
-                        <Field {field} />
-                        <span css={css!{"color: red;"}}>{val_error}</span>
-                    </div>
-                });
-            }
-
-            let label = &section.label;
-
-            let section_rendered = dom! {
-                <label css={&section_css} {..attrs}>
-                    {label}
-                    <div css={&fieldset_flex_css} css={custom_fieldset_css}>
-                        {..values}
-                    </div>
-                </label>
-            };
-                // {..section.new_group.then(|| dom! { <hr css={css!{"width: 100%;"}}/> })}
-
-            if section.new_group {
-                vec![
-                    dom! {
-                        <hr css={css!{"width: 100%; grid-column: 1 / 3;"}}/>
-                    },
-                    section_rendered
-                ]
-            } else {
-                vec![
-                    section_rendered
-                ]
-            }
-        } else if let Some(field) = section.fields.first() {
-            let val_error = {
-                let field_key = field.key.to_owned();
-                validation_errors.render_value_option(move |errs| {
-                    errs.get(&field_key).map(|err| dom! { <span>{err}</span> })
-                })
-            };
-            vec![dom! {
-                <label css={&section_css} {..attrs}>
-                    {&section.label}
-                    <div css={css!{"display: flex; flex-flow: column nowrap;"}}>
-                        <Field {field} />
-                        <span css={css!{"color: red;"}}>{val_error}</span>
-                    </div>
-                </label>
-            }]
-        } else {
-            vec![dom! { <p /> }]
-        }
-    });
-
     let controls = |params: &FormParams<T>, c_config: &ControlsConfig| {
         let mut controls = vec![];
 
@@ -287,12 +145,17 @@ pub fn Form<T>(
             params.saving_label,
             params.saved_label,
             params.operation.render_value_option(move |oper| {
+                let mut css = ctrl_item_css.clone();
                 match oper {
-                    Operation::Saving => Some(&saving_label),
-                    Operation::Success => Some(&saved_label),
+                    Operation::Saving => Some(saving_label.clone()),
+                    Operation::Success => Some(saved_label.clone()),
+                    Operation::Error(err) => {
+                        css += css! {"color: red;"};
+                        Some(err)
+                    }
                     _ => None,
                 }
-                .map(|operation_str| dom! { <span css={&ctrl_item_css}>{operation_str}</span> })
+                .map(|operation_str| dom! { <span {css}>{operation_str}</span> })
             })
         );
 
@@ -301,7 +164,7 @@ pub fn Form<T>(
         } else {
             let mut css_controls = css!("grid-column: span 2;");
             if let Some(custom_css) = &c_config.css {
-                css_controls = css_controls.extend(custom_css.clone());
+                css_controls += custom_css;
             }
             Some(dom! {
                 <div css={css_controls}>
@@ -316,6 +179,26 @@ pub fn Form<T>(
     let top_controls = controls(&params, &form_data.top_controls);
     let bottom_controls = controls(&params, &form_data.bottom_controls);
 
+    let section_css = subgrid_css + params.add_section_css;
+
+    let fields = fields(
+        &form_data.sections,
+        &s,
+        validation_errors.clone(),
+        &section_css,
+    );
+
+    let tabs = tabs(
+        &form_data.tabs,
+        &params.tabs_params,
+        &s,
+        validation_errors.clone(),
+        &section_css,
+        &params.css.clone(),
+    );
+
+    let form_css = params.css + params.add_css;
+
     let on_submit = bind_rc!(form_data, validation_errors, || {
         params.operation.set(Operation::Saving);
         let model = form_data.export();
@@ -327,20 +210,13 @@ pub fn Form<T>(
         if valid {
             on_submit(model);
         }
-        // params.operation.change(|oper|
-        //     // Auto change operation value only if it was not modified by callback
-        //     if oper == &Operation::Saving {
-        //         *oper = Operation::Success;
-        //     }
-        // );
     });
 
-    let form_css = params.css.extend(params.add_css.clone());
-
     dom! {
         <form css={form_css} on_submit={on_submit} {..f}>
             {..top_controls}
             {..fields}
+            {..tabs}
             {..bottom_controls}
         </form>
     }
diff --git a/src/form/render/field.rs b/src/form/render/field.rs
new file mode 100644
index 0000000..2574921
--- /dev/null
+++ b/src/form/render/field.rs
@@ -0,0 +1,81 @@
+use vertigo::{DomElement, Value, bind, component, css, dom, dom_element};
+
+use crate::{DictSelect, DropImageFile, Select, SelectSearch, Switch, SwitchParams, input::Input};
+
+use super::super::{DataField, DataFieldValue};
+
+#[component]
+pub fn Field<'a>(field: &'a DataField) {
+    match &field.value {
+        DataFieldValue::String(val) => {
+            dom! { <Input input:name={&&field.key} value={val.value.clone()} /> }
+        }
+        DataFieldValue::TextArea(val) => {
+            let on_input = bind!(val.value, |new_value: String| {
+                value.set(new_value);
+            });
+            let el =
+                dom_element! { <textarea name={&&field.key} {on_input}>{&val.value}</textarea> };
+            if let Some(rows) = val.rows {
+                el.add_attr("rows", rows);
+            }
+            if let Some(cols) = val.cols {
+                el.add_attr("cols", cols);
+            }
+            el.into()
+        }
+        DataFieldValue::List(val) => {
+            dom! { <Select value={val.value.clone()} options={&val.options} /> }
+        }
+        DataFieldValue::Bool(val) => {
+            dom! {
+                <Switch i:name={&&field.key} value={&val.value} params={SwitchParams::checkbox()} />
+            }
+        }
+        DataFieldValue::Dict(val) => {
+            dom! { <DictSelect value={val.value.clone()} options={&val.options} /> }
+        }
+        DataFieldValue::Multi(val) => {
+            bind!(val.value, val.options, val.add_label,
+                val.value.render_value(move |vals| {
+                    let selects = DomElement::new("div");
+                    let row_css = css! {"
+                        display: flex;
+                    "};
+
+                    for (idx, tag_id) in vals.iter().enumerate() {
+                        let on_click = bind!(value, |_| value.change(|list| {
+                            list.remove(idx);
+                        }));
+                        selects.add_child(dom! {
+                        <div css={&row_css}>
+                            <SelectSearch value={tag_id.clone()} options={options.clone()} params={} />
+                            <button {on_click}>"x"</button>
+                        </div>
+                    });
+                    }
+
+                    selects.add_child({
+                        let on_click = bind!(value, |_| value
+                            .change(|list| list.push(Value::new(0))));
+                        dom! {
+                            <button {on_click}>{&add_label}</button>
+                        }
+                    });
+
+                    selects.into()
+                })
+            )
+        }
+        DataFieldValue::Image(val) => {
+            let params = val.component_params.clone().unwrap_or_default();
+            dom! { <DropImageFile
+                item={val.value.clone()}
+                original_link={val.original_link.clone()}
+                {params}
+            /> }
+        }
+        DataFieldValue::Custom(val) => (val.render)(),
+        DataFieldValue::StaticCustom(render) => render(),
+    }
+}
diff --git a/src/form/render/fields.rs b/src/form/render/fields.rs
new file mode 100644
index 0000000..754061a
--- /dev/null
+++ b/src/form/render/fields.rs
@@ -0,0 +1,74 @@
+use vertigo::{AttrGroup, Css, DomNode, Value, css, dom};
+
+use crate::ValidationErrors;
+
+use super::super::{DataField, DataSection, Field, FieldsetStyle};
+
+pub(in super::super) fn fields<'a>(
+    sections: &'a [DataSection],
+    s: &'a AttrGroup,
+    validation_errors: Value<ValidationErrors>,
+    section_css: &'a Css,
+) -> impl Iterator<Item = DomNode> + 'a {
+    let fieldset_flex_css = css! {"
+        display: flex;
+        gap: 5px;
+    "};
+
+    sections.iter().flat_map(move |section| {
+        let attrs = s.clone();
+        let custom_fieldset_css = section.fieldset_css.clone().unwrap_or_else(|| css! {""});
+
+        let section_rendered = if section.fields.len() > 1 {
+            let mut values = vec![];
+            for (i, field) in section.fields.iter().enumerate() {
+                if section.fieldset_style == FieldsetStyle::Dimensions && i > 0 {
+                    values.push(dom! { <span>"x"</span> });
+                }
+                values.push(render_field(field, &validation_errors));
+            }
+
+            dom! {
+                <label css={section_css} {..attrs}>
+                    {&section.label}
+                    <div css={&fieldset_flex_css} css={custom_fieldset_css}>
+                        {..values}
+                    </div>
+                </label>
+            }
+        } else if let Some(field) = section.fields.first() {
+            dom! {
+                <label css={section_css} {..attrs}>
+                    {&section.label}
+                    {render_field(field, &validation_errors)}
+                </label>
+            }
+        } else {
+            dom! { <p /> }
+        };
+
+        if section.new_group {
+            vec![
+                dom! { <hr css={css!{"width: 100%; grid-column: 1 / 3;"}}/> },
+                section_rendered,
+            ]
+        } else {
+            vec![section_rendered]
+        }
+    })
+}
+
+fn render_field(field: &DataField, validation_errors: &Value<ValidationErrors>) -> DomNode {
+    let val_error = {
+        let field_key = field.key.to_owned();
+        validation_errors.render_value_option(move |errs| {
+            errs.get(&field_key).map(|err| dom! { <span>{err}</span> })
+        })
+    };
+    dom! {
+        <div css={css!{"display: flex; flex-flow: column nowrap;"}}>
+            <Field {field} />
+            <span css={css!{"color: red;"}}>{val_error}</span>
+        </div>
+    }
+}
diff --git a/src/form/render/mod.rs b/src/form/render/mod.rs
new file mode 100644
index 0000000..1f70b50
--- /dev/null
+++ b/src/form/render/mod.rs
@@ -0,0 +1,8 @@
+mod field;
+pub use field::Field;
+
+mod fields;
+pub(super) use fields::fields;
+
+mod tabs;
+pub(super) use tabs::tabs;
diff --git a/src/form/render/tabs.rs b/src/form/render/tabs.rs
new file mode 100644
index 0000000..1890e5e
--- /dev/null
+++ b/src/form/render/tabs.rs
@@ -0,0 +1,56 @@
+use std::rc::Rc;
+
+use vertigo::{AttrGroup, Css, DomNode, Value, dom};
+
+use crate::{
+    Tab, Tabs, TabsParams, ValidationErrors,
+    form::{DataSection, fields},
+};
+
+pub(in super::super) fn tabs<'a>(
+    tabs: &'a [(String, Rc<Vec<DataSection>>)],
+    tabs_params: &'a Option<TabsParams>,
+    s: &'a AttrGroup,
+    validation_errors: Value<ValidationErrors>,
+    section_css: &'a Css,
+    form_css: &Css,
+) -> Option<DomNode> {
+    if tabs.is_empty() {
+        return None;
+    }
+
+    let current_tab = Value::new(tabs[0].0.clone());
+
+    let tabs = tabs
+        .iter()
+        .map(|(label, sections)| Tab {
+            key: label.clone(),
+            name: label.to_string(),
+            render: {
+                let sections = sections.clone();
+                let s = s.clone();
+                let validation_errors = validation_errors.clone();
+                let section_css = section_css.clone();
+                let form_css = form_css.clone();
+                Rc::new(move |_| {
+                    let fields = fields(&sections, &s, validation_errors.clone(), &section_css);
+                    dom! {
+                        <div css={&form_css}>
+                            {..fields}
+                        </div>
+                    }
+                })
+            },
+        })
+        .collect::<Vec<_>>();
+
+    type FormTabs = Tabs<Value<String>, String>;
+
+    Some(dom! {
+        <FormTabs
+            tabs={tabs}
+            current_tab={current_tab}
+            params={tabs_params.clone().unwrap_or_default()}
+        />
+    })
+}
diff --git a/src/input/input.rs b/src/input/input.rs
index 011c091..37e5267 100644
--- a/src/input/input.rs
+++ b/src/input/input.rs
@@ -1,4 +1,4 @@
-use vertigo::{bind, component, dom, AttrGroup, Value};
+use vertigo::{AttrGroup, Value, bind, component, dom};
 
 /// Input connected to provided `Value<String>`.
 #[component]
diff --git a/src/input/input_with_button.rs b/src/input/input_with_button.rs
index 4548e1c..1d39a3d 100644
--- a/src/input/input_with_button.rs
+++ b/src/input/input_with_button.rs
@@ -1,4 +1,4 @@
-use vertigo::{bind, component, computed_tuple, dom, transaction, AttrGroup, Value};
+use vertigo::{AttrGroup, Value, bind, component, computed_tuple, dom, transaction};
 
 /// Input connected to provided `Value<String>`.
 ///
diff --git a/src/input/list_input.rs b/src/input/list_input.rs
index edd07e8..db26830 100644
--- a/src/input/list_input.rs
+++ b/src/input/list_input.rs
@@ -1,4 +1,4 @@
-use vertigo::{bind, component, dom, AttrGroup, Value};
+use vertigo::{AttrGroup, Value, bind, component, dom};
 
 /// Input connected to provided `Value<Vec<String>>`.
 ///
diff --git a/src/lib.rs b/src/lib.rs
index 2ec8bd1..cb22d0e 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -14,7 +14,7 @@ mod tabs;
 mod with_loader;
 
 pub use {
-    drop_image_file::{image_as_uri, name_to_mime, DropImageFile, DropImageFileParams},
+    drop_image_file::{DropImageFile, DropImageFileParams, image_as_uri, name_to_mime},
     input::{Input, InputWithButton, InputWithButtonParams, ListInput},
     popup::{Popup, PopupOnHover, PopupParams},
     search_panel::{SearchPanel, SearchPanelParams, SearchResult},
@@ -23,7 +23,7 @@ pub use {
     spinner::Spinner,
     switch::{Switch, SwitchParams},
     tabs::{Tab, Tabs, TabsContent, TabsContentMapped, TabsHeader, TabsParams},
-    with_loader::{with_loader, WithLoader},
+    with_loader::{WithLoader, with_loader},
 };
 
 pub type ValidationErrors = HashMap<String, String>;
diff --git a/src/login.rs b/src/login.rs
index 1a77d8f..ef1d488 100644
--- a/src/login.rs
+++ b/src/login.rs
@@ -1,5 +1,5 @@
 use std::rc::Rc;
-use vertigo::{bind, bind_rc, css, dom, transaction, Css, DomNode, KeyDownEvent, Resource, Value};
+use vertigo::{Css, DomNode, KeyDownEvent, Resource, Value, bind, bind_rc, css, dom, transaction};
 
 pub type OnSubmit = Rc<dyn Fn(&str, &str)>;
 
@@ -80,12 +80,9 @@ impl<T: Clone + PartialEq + 'static> Login<T> {
             false
         });
 
-        let css = params.css.clone().extend(params.add_css.clone());
-        let line_css = params.line_css.clone().extend(params.line_add_css.clone());
-        let submit_css = params
-            .submit_css
-            .clone()
-            .extend(params.submit_add_css.clone());
+        let css = &params.css + &params.add_css;
+        let line_css = &params.line_css + &params.line_add_css;
+        let submit_css = &params.submit_css + &params.submit_add_css;
         let error_message = params.error_message.clone();
         let waiting_label = params.waiting_label.clone();
 
diff --git a/src/popup.rs b/src/popup.rs
index 4686baa..2d69a14 100644
--- a/src/popup.rs
+++ b/src/popup.rs
@@ -1,4 +1,4 @@
-use vertigo::{bind, component, css, dom, Computed, Css, DomNode};
+use vertigo::{Computed, Css, DomNode, bind, component, css, dom};
 
 #[derive(Clone, Default)]
 pub struct PopupParams {
@@ -24,16 +24,14 @@ fn operator_css() -> Css {
 pub fn Popup(visible: Computed<bool>, content: DomNode, params: PopupParams) {
     let popup_css = popup_css();
 
-    let operator_css = bind!(
+    let container_css = bind!(
         popup_css,
         params,
         visible.map(move |enabled| {
             let base_css = operator_css();
 
             if enabled {
-                base_css.extend(css! {"
-                    [popup_css] { visibility: visible; }
-                "})
+                base_css + css! {"[popup_css] { visibility: visible; }"}
             } else {
                 base_css
             }
@@ -41,8 +39,8 @@ pub fn Popup(visible: Computed<bool>, content: DomNode, params: PopupParams) {
     );
 
     dom! {
-        <div css={operator_css}>
-            <div css={popup_css.extend(params.css.clone())}>
+        <div css={container_css}>
+            <div css={popup_css + params.css}>
                 {content}
             </div>
         </div>
@@ -53,14 +51,12 @@ pub fn Popup(visible: Computed<bool>, content: DomNode, params: PopupParams) {
 pub fn PopupOnHover(element: DomNode, content: DomNode, params: PopupParams) {
     let popup_css = popup_css();
 
-    let operator_css = operator_css().extend(css! {"
-        :hover [popup_css] { visibility: visible; }
-    "});
+    let operator_css = operator_css() + css! {":hover [popup_css] { visibility: visible; }"};
 
     dom! {
         <div css={operator_css}>
             {element}
-            <div css={popup_css.extend(params.css)}>
+            <div css={popup_css + params.css}>
                 {content}
             </div>
         </div>
diff --git a/src/search_panel.rs b/src/search_panel.rs
index 286ef36..c919d7c 100644
--- a/src/search_panel.rs
+++ b/src/search_panel.rs
@@ -1,6 +1,6 @@
 use std::rc::Rc;
 
-use vertigo::{bind, dom, AutoMap, DomNode, Resource, ToComputed, Value};
+use vertigo::{AutoMap, DomNode, Resource, ToComputed, Value, bind, dom};
 
 pub trait SearchResult {
     fn is_empty(&self) -> bool;
diff --git a/src/select/dict_select.rs b/src/select/dict_select.rs
index 9e968de..adc218d 100644
--- a/src/select/dict_select.rs
+++ b/src/select/dict_select.rs
@@ -1,4 +1,4 @@
-use vertigo::{bind, component, dom, AttrGroup, Computed, Value};
+use vertigo::{AttrGroup, Computed, Value, bind, component, computed_tuple, dom};
 
 /// Simple Select component based on map of `i64`->`T` values.
 ///
@@ -33,6 +33,13 @@ pub fn DictSelect<T: Clone + From<String> + PartialEq + ToString + 'static>(
         value.set(new_value.parse().unwrap_or_default());
     });
 
+    let empty = computed_tuple!(value, options).render_value_option(|(value, options)| {
+        options
+            .iter()
+            .any(|(key, _)| key != &value)
+            .then(|| dom! { <option value="" selected="selected" /> })
+    });
+
     let list = bind!(
         options,
         value.render_value(move |value| options.render_list(
@@ -50,6 +57,7 @@ pub fn DictSelect<T: Clone + From<String> + PartialEq + ToString + 'static>(
 
     dom! {
         <select {on_change} {..select}>
+            {empty}
             {list}
         </select>
     }
diff --git a/src/select/multi_drop_down.rs b/src/select/multi_drop_down.rs
index 34ea3bb..a7c986a 100644
--- a/src/select/multi_drop_down.rs
+++ b/src/select/multi_drop_down.rs
@@ -1,4 +1,4 @@
-use vertigo::{bind, css, dom, Computed, Css, DomNode, Value};
+use vertigo::{Computed, Css, DomNode, Value, bind, css, dom};
 
 use super::multi_select::MultiSelect;
 
@@ -35,12 +35,12 @@ where
             position: absolute;
             z-index: 1;
         "};
-        let drop_down_content_css = content_css.extend(self.params.drop_down_content_css);
+        let drop_down_content_css = content_css + self.params.drop_down_content_css;
 
         let content = opened.render_value(move |opened| {
             if opened {
                 dom! {
-                    <div css={drop_down_content_css.clone()}>
+                    <div css={&drop_down_content_css}>
                         <MultiSelect
                             value={&self.value}
                             options={&self.options}
diff --git a/src/select/multi_select.rs b/src/select/multi_select.rs
index 08afe28..1d70dea 100644
--- a/src/select/multi_select.rs
+++ b/src/select/multi_select.rs
@@ -1,4 +1,4 @@
-use vertigo::{bind, bind_rc, css, dom, Computed, Css, DomNode, Value};
+use vertigo::{Computed, Css, DomNode, Value, bind, bind_rc, css, dom};
 
 /// Select component based on vector of `T` values,
 /// which allows to have multiple options selected at once.
diff --git a/src/select/select.rs b/src/select/select.rs
index 7d0df78..011e5f1 100644
--- a/src/select/select.rs
+++ b/src/select/select.rs
@@ -1,4 +1,6 @@
-use vertigo::{bind, dom, Computed, DomNode, Value};
+use std::ops::Not;
+
+use vertigo::{Computed, DomNode, Value, bind, computed_tuple, dom};
 
 /// Simple Select component based on vector of `T` values.
 ///
@@ -42,6 +44,13 @@ where
             value.set(new_value.into());
         });
 
+        let empty = computed_tuple!(value, options).render_value_option(|(value, options)| {
+            options
+                .contains(&value)
+                .not()
+                .then(|| dom! { <option value="" selected="selected" /> })
+        });
+
         let list = bind!(
             options,
             value.render_value(move |value| options.render_list(
@@ -59,6 +68,7 @@ where
 
         dom! {
             <select {on_change}>
+                {empty}
                 {list}
             </select>
         }
diff --git a/src/select_search.rs b/src/select_search.rs
index a08b96c..b6876ec 100644
--- a/src/select_search.rs
+++ b/src/select_search.rs
@@ -1,8 +1,8 @@
 use either::Either;
 use std::{collections::HashMap, hash::Hash};
 use vertigo::{
-    bind, computed_tuple, css, dom, dom_element, transaction, Computed, DomNode, KeyDownEvent,
-    Value,
+    Computed, DomNode, KeyDownEvent, Value, bind, computed_tuple, css, dom, dom_element,
+    transaction,
 };
 
 /// Input that searches for entered query in provided item list, based on `HashMap<K, V>`.
diff --git a/src/switch.rs b/src/switch.rs
index 54ef02e..47deb6e 100644
--- a/src/switch.rs
+++ b/src/switch.rs
@@ -1,4 +1,4 @@
-use vertigo::{AttrGroup, bind, component, dom, transaction, Value};
+use vertigo::{AttrGroup, Value, bind, component, dom, transaction};
 
 pub enum DisplayType {
     Button,
diff --git a/src/tabs/mod.rs b/src/tabs/mod.rs
index f81bc99..e824e4c 100644
--- a/src/tabs/mod.rs
+++ b/src/tabs/mod.rs
@@ -1,5 +1,5 @@
 use std::rc::Rc;
-use vertigo::{bind, css, dom, Computed, Css, DomElement, DomNode, Reactive, ToComputed};
+use vertigo::{Computed, Css, DomElement, DomNode, Reactive, ToComputed, bind, css, dom};
 
 #[derive(Clone)]
 pub struct Tab<K> {
@@ -8,22 +8,20 @@ pub struct Tab<K> {
     pub render: Rc<dyn Fn(&K) -> DomNode>,
 }
 
-pub type RenderHeaderFunc<K> = Rc<dyn Fn(&Tab<K>) -> DomNode>;
-
 #[derive(Clone)]
-pub struct TabsParams<K> {
-    pub render_header_item: Option<RenderHeaderFunc<K>>,
+pub struct TabsParams {
     pub header_css: Css,
     pub header_item_css: Css,
     pub header_item_add_css: Css,
     pub header_active_item_add_css: Css,
     pub content_css: Css,
+    pub container_css: Css,
 }
 
-impl<K> Default for TabsParams<K> {
+impl Default for TabsParams {
     fn default() -> Self {
         Self {
-            render_header_item: None,
+            // render_header_item: None,
             header_css: css! {"
                 display: flex;
                 flex-wrap: wrap;
@@ -37,6 +35,7 @@ impl<K> Default for TabsParams<K> {
             header_item_add_css: Css::default(),
             header_active_item_add_css: Css::default(),
             content_css: Css::default(),
+            container_css: Css::default(),
         }
     }
 }
@@ -45,7 +44,7 @@ impl<K> Default for TabsParams<K> {
 pub struct Tabs<R: Reactive<K>, K: Clone> {
     pub current_tab: R,
     pub tabs: Vec<Tab<K>>,
-    pub params: TabsParams<K>,
+    pub params: TabsParams,
 }
 
 impl<R, K> Tabs<R, K>
@@ -67,7 +66,7 @@ where
         let current_computed = current_tab.to_computed();
 
         dom! {
-            <div>
+            <div css={&params.container_css}>
                 <TabsHeader
                     {&current_tab}
                     tabs={tabs.clone()}
@@ -87,7 +86,7 @@ where
 pub struct TabsHeader<R: Reactive<K>, K: Clone> {
     pub current_tab: R,
     pub tabs: Vec<Tab<K>>,
-    pub params: TabsParams<K>,
+    pub params: TabsParams,
 }
 
 impl<R, K> TabsHeader<R, K>
@@ -106,7 +105,7 @@ where
             params,
         } = self;
 
-        let header_item_css = params.header_item_css.extend(params.header_item_add_css);
+        let header_item_css = params.header_item_css + params.header_item_add_css;
         let header_active_item_add_css = params.header_active_item_add_css;
 
         // let current_tab_clone = current_tab.clone();
@@ -116,27 +115,18 @@ where
                 let header = DomElement::new("ul").css(params.header_css.clone());
 
                 tabs.iter().for_each(|tab| {
-                    if let Some(render_header_item) = &params.render_header_item {
-                        // Custom item rendering
-                        header.add_child(render_header_item(tab));
+                    let on_click = bind!(current_tab, tab | _ | current_tab.set(tab.key.clone()));
+                    let header_item_css = if current_tab_val == tab.key {
+                        &header_item_css + &header_active_item_add_css
                     } else {
-                        // Default item rendering
-                        let on_click =
-                            bind!(current_tab, tab | _ | current_tab.set(tab.key.clone()));
-                        let header_item_css = if current_tab_val == tab.key {
-                            header_item_css
-                                .clone()
-                                .extend(header_active_item_add_css.clone())
-                        } else {
-                            header_item_css.clone()
-                        };
-                        let item_css = css!("display: block;");
-                        header.add_child(dom! {
-                            <li css={item_css}>
-                                <a  css={header_item_css} on_click={on_click}>{&tab.name}</a>
-                            </li>
-                        });
-                    }
+                        header_item_css.clone()
+                    };
+                    let item_css = css!("display: block;");
+                    header.add_child(dom! {
+                        <li css={item_css}>
+                            <a  css={header_item_css} on_click={on_click}>{&tab.name}</a>
+                        </li>
+                    });
                 });
 
                 header.into()
@@ -148,7 +138,7 @@ where
 pub struct TabsContent<K: Clone> {
     pub current_tab: Computed<K>,
     pub tabs: Vec<Tab<K>>,
-    pub params: TabsParams<K>,
+    pub params: TabsParams,
 }
 
 impl<K> TabsContent<K>
@@ -179,7 +169,7 @@ pub struct TabsContentMapped<K: Clone> {
     pub current_tab: Computed<K>,
     pub tabs: Vec<Tab<K>>,
     pub tab_map: Rc<dyn Fn(K) -> K>,
-    pub params: TabsParams<K>,
+    pub params: TabsParams,
 }
 
 impl<K> TabsContentMapped<K>
@@ -208,7 +198,7 @@ fn render_tab_content<K: PartialEq + Clone>(
     current_tab: &K,
     effective_tab: &K,
     tabs: &[Tab<K>],
-    params: &TabsParams<K>,
+    params: &TabsParams,
 ) -> DomNode {
     let inner = match tabs.iter().find(|tab| &tab.key == effective_tab).cloned() {
         Some(tab) => (tab.render)(current_tab),
diff --git a/src/with_loader.rs b/src/with_loader.rs
index f4ecd38..00a660c 100644
--- a/src/with_loader.rs
+++ b/src/with_loader.rs
@@ -1,5 +1,5 @@
 use std::rc::Rc;
-use vertigo::{component, dom, Computed, DomNode, Resource};
+use vertigo::{Computed, DomNode, Resource, component, dom};
 
 use crate::Spinner;
 
diff --git a/storybook/src/form/form1.rs b/storybook/src/form/form1.rs
new file mode 100644
index 0000000..f01afb2
--- /dev/null
+++ b/storybook/src/form/form1.rs
@@ -0,0 +1,77 @@
+use vertigo::{bind_rc, component, css, dom, Value};
+use vertigo_forms::form::{
+    DataSection, FieldsetStyle, FormData, FormExport, FormParams, ModelForm,
+};
+
+// Form example 1
+
+#[derive(Clone, PartialEq)]
+pub struct MyModel {
+    pub slug: String,
+    pub name: String,
+    pub dimension_x: String,
+    pub dimension_y: String,
+}
+
+impl From<&MyModel> for FormData {
+    fn from(value: &MyModel) -> Self {
+        Self::default()
+            .with(DataSection::with_string_field("Slug", "slug", &value.slug))
+            .with(DataSection::with_string_field("Name", "name", &value.name))
+            .with(
+                DataSection::with_string_field("Dimensions", "dimension_x", &value.dimension_x)
+                    .add_string_field("dimension_y", &value.dimension_y)
+                    .set_fieldset_style(FieldsetStyle::Dimensions),
+            )
+            .add_bottom_controls()
+    }
+}
+
+impl From<FormExport> for MyModel {
+    fn from(form_export: FormExport) -> Self {
+        Self {
+            slug: form_export.get_string("slug"),
+            name: form_export.get_string("name"),
+            dimension_x: form_export.get_string("dimension_x"),
+            dimension_y: form_export.get_string("dimension_y"),
+        }
+    }
+}
+
+#[component]
+pub fn Form1() {
+    let my_model: Value<MyModel> = Value::new(MyModel {
+        slug: "model-one".to_string(),
+        name: "Model One".to_string(),
+        dimension_x: "120".to_string(),
+        dimension_y: "80".to_string(),
+    });
+
+    let my_model_clone = my_model.clone();
+    let form = my_model.render_value(move |model| {
+        let on_submit = bind_rc!(my_model_clone, |new_model: MyModel| {
+            my_model_clone.set(new_model);
+        });
+
+        dom! {
+            <ModelForm
+                model={&&model}
+                {on_submit}
+                params={FormParams {
+                    add_css: css! {"width: 400px;"},
+                    ..Default::default()
+                }}
+            />
+        }
+    });
+
+    dom! {
+        <div>
+            <h4>"Form 1:"</h4>
+            {form}
+            <h4>"Model 1:"</h4>
+            <p>{my_model.map(|m| m.slug)} " / " {my_model.map(|m| m.name)}</p>
+            <p>{my_model.map(|m| m.dimension_x)} "x" {my_model.map(|m| m.dimension_y)}</p>
+        </div>
+    }
+}
diff --git a/storybook/src/form.rs b/storybook/src/form/form2.rs
similarity index 57%
rename from storybook/src/form.rs
rename to storybook/src/form/form2.rs
index e667b83..c0874cc 100644
--- a/storybook/src/form.rs
+++ b/storybook/src/form/form2.rs
@@ -1,90 +1,7 @@
 use std::rc::Rc;
 
-use vertigo::{bind_rc, component, css, dom, DomNode, Value};
-use vertigo_forms::form::{
-    DataSection, FieldsetStyle, FormData, FormExport, FormParams, ModelForm,
-};
-
-pub fn form() -> DomNode {
-    dom! {
-        <Form1 />
-        <hr />
-        <Form2 />
-    }
-}
-
-// Form example 1
-
-#[derive(Clone, PartialEq)]
-pub struct MyModel {
-    pub slug: String,
-    pub name: String,
-    pub dimension_x: String,
-    pub dimension_y: String,
-}
-
-impl From<&MyModel> for FormData {
-    fn from(value: &MyModel) -> Self {
-        Self::default()
-            .with(DataSection::with_string_field("Slug", "slug", &value.slug))
-            .with(DataSection::with_string_field("Name", "name", &value.name))
-            .with(
-                DataSection::with_string_field("Dimensions", "dimension_x", &value.dimension_x)
-                    .add_string_field("dimension_y", &value.dimension_y)
-                    .set_fieldset_style(FieldsetStyle::Dimensions),
-            )
-            .add_bottom_controls()
-    }
-}
-
-impl From<FormExport> for MyModel {
-    fn from(form_export: FormExport) -> Self {
-        Self {
-            slug: form_export.get_string("slug"),
-            name: form_export.get_string("name"),
-            dimension_x: form_export.get_string("dimension_x"),
-            dimension_y: form_export.get_string("dimension_y"),
-        }
-    }
-}
-
-#[component]
-pub fn Form1() {
-    let my_model: Value<MyModel> = Value::new(MyModel {
-        slug: "model-one".to_string(),
-        name: "Model One".to_string(),
-        dimension_x: "120".to_string(),
-        dimension_y: "80".to_string(),
-    });
-
-    let my_model_clone = my_model.clone();
-    let form = my_model.render_value(move |model| {
-        let on_submit = bind_rc!(my_model_clone, |new_model: MyModel| {
-            my_model_clone.set(new_model);
-        });
-
-        dom! {
-            <ModelForm
-                model={&&model}
-                {on_submit}
-                params={FormParams {
-                    add_css: css! {"width: 400px;"},
-                    ..Default::default()
-                }}
-            />
-        }
-    });
-
-    dom! {
-        <div>
-            <h4>"Form 1:"</h4>
-            {form}
-            <h4>"Model 1:"</h4>
-            <p>{my_model.map(|m| m.slug)} " / " {my_model.map(|m| m.name)}</p>
-            <p>{my_model.map(|m| m.dimension_x)} "x" {my_model.map(|m| m.dimension_y)}</p>
-        </div>
-    }
-}
+use vertigo::{bind_rc, component, css, dom, Value};
+use vertigo_forms::form::{DataSection, FormData, FormExport, FormParams, ModelForm};
 
 // Form example 2
 
@@ -149,7 +66,11 @@ impl From<&MySecondModel> for FormData {
                 Some(value.gender.to_string()),
                 gender_map,
             ))
-            .with(DataSection::new("Role").add_dict_field("role", Some(value.role), role_map))
+            .with(DataSection::new("Role").add_static_dict_field(
+                "role",
+                Some(value.role),
+                role_map,
+            ))
             .with(DataSection::new("Photo").add_image_field("photo", Some(&value.photo)))
             .add_bottom_controls()
     }
@@ -160,7 +81,7 @@ impl From<FormExport> for MySecondModel {
         Self {
             first_name: form_export.get_string("first_name"),
             surname: form_export.get_string("surname"),
-            gender: form_export.list_or_default("gender"),
+            gender: form_export.list("gender").unwrap_or(Gender::Male),
             role: form_export.dict_or_default("role"),
             photo: form_export.image_url("photo"),
         }
diff --git a/storybook/src/form/mod.rs b/storybook/src/form/mod.rs
new file mode 100644
index 0000000..7c5e487
--- /dev/null
+++ b/storybook/src/form/mod.rs
@@ -0,0 +1,44 @@
+use std::rc::Rc;
+use vertigo::{dom, DomNode, Value};
+use vertigo_forms::{Tab, Tabs};
+
+use crate::bordered_tabs;
+
+mod form1;
+
+mod form2;
+
+mod tabbed_form;
+
+pub fn form() -> DomNode {
+    type MyTabs<T> = Tabs<Value<T>, T>;
+    dom! {
+        <MyTabs
+            current_tab={Value::new("form1")}
+            tabs={vec![
+                Tab {
+                    key: "form1",
+                    name: "Form 1".to_string(),
+                    render: Rc::new(move |_| {
+                        dom! { <form1::Form1 /> }
+                    }),
+                },
+                Tab {
+                    key: "form2",
+                    name: "Form 2".to_string(),
+                    render: Rc::new(move |_| {
+                        dom! { <form2::Form2 /> }
+                    }),
+                },
+                Tab {
+                    key: "tabbed_form",
+                    name: "Tabbed Form".to_string(),
+                    render: Rc::new(move |_| {
+                        dom! { <tabbed_form::TabbedForm /> }
+                    }),
+                },
+            ]}
+            params={bordered_tabs()}
+        />
+    }
+}
diff --git a/storybook/src/form/tabbed_form.rs b/storybook/src/form/tabbed_form.rs
new file mode 100644
index 0000000..5096c29
--- /dev/null
+++ b/storybook/src/form/tabbed_form.rs
@@ -0,0 +1,88 @@
+use std::rc::Rc;
+
+use vertigo::{bind_rc, component, css, dom, Value};
+use vertigo_forms::form::{
+    DataFieldValue, DataSection, FormData, FormExport, FormParams, ModelForm, TextAreaValue,
+};
+
+use crate::bordered_tabs;
+
+// Tabbed Form example
+
+#[derive(Clone, PartialEq)]
+pub struct TModel {
+    pub first_name: String,
+    pub last_name: String,
+    pub annotation: Option<String>,
+}
+
+impl From<&TModel> for FormData {
+    fn from(value: &TModel) -> Self {
+        Self::default()
+            .add_tab(
+                "Basic",
+                vec![
+                    DataSection::with_string_field("First name", "first_name", &value.first_name),
+                    DataSection::with_string_field("Last name", "last_name", &value.last_name),
+                ],
+            )
+            .add_tab(
+                "Other",
+                vec![DataSection::new("Annotation").add_field(
+                    "annotation",
+                    DataFieldValue::TextArea(TextAreaValue {
+                        value: Value::new(value.annotation.clone().unwrap_or_default()),
+                        original_value: value.annotation.clone().map(Rc::new),
+                        rows: Some(10),
+                        cols: None,
+                    }),
+                )],
+            )
+            .add_top_controls()
+    }
+}
+
+impl From<FormExport> for TModel {
+    fn from(form_export: FormExport) -> Self {
+        Self {
+            first_name: form_export.get_string("first_name"),
+            last_name: form_export.get_string("last_name"),
+            annotation: form_export.get_string_opt("annotation"),
+        }
+    }
+}
+
+#[component]
+pub fn TabbedForm() {
+    let my_model: Value<TModel> = Value::new(TModel {
+        first_name: "Johann".to_string(),
+        last_name: "Gambolputty".to_string(),
+        annotation: None,
+    });
+
+    let my_model_clone = my_model.clone();
+    let form = my_model.render_value(move |model| {
+        let on_submit = bind_rc!(my_model_clone, |new_model: TModel| {
+            my_model_clone.set(new_model);
+        });
+
+        dom! {
+            <ModelForm
+                model={&&model}
+                {on_submit}
+                params={FormParams {
+                    add_css: css! {"width: 400px;"},
+                    tabs_params: Some(bordered_tabs()),
+                    ..Default::default()
+                }}
+            />
+        }
+    });
+
+    dom! {
+        <div>
+            <h4>"Tabbed Form:"</h4>
+            {form}
+        </div>
+    }
+}
diff --git a/storybook/src/lib.rs b/storybook/src/lib.rs
index 1957463..0fd1f42 100644
--- a/storybook/src/lib.rs
+++ b/storybook/src/lib.rs
@@ -163,28 +163,29 @@ fn render() -> DomNode {
                     <Tabs
                         {&current_tab}
                         {tabs}
-                        params={TabsParams {
-                            header_item_add_css: css!(
-                                "
-                                border: 1px solid black;
-                                padding: 0px 10px;
-                            "
-                            ),
-                            header_active_item_add_css: css!(
-                                "
-                                background-color: lightgray;
-                            "
-                            ),
-                            content_css: css!(
-                                "
-                                border: solid 1px black;
-                                padding: 0px 10px;
-                                "
-                            ),
-                            ..Default::default()
-                        }}
+                        params={bordered_tabs()}
                     />
             </body>
         </html>
     }
 }
+
+pub fn bordered_tabs() -> TabsParams {
+    TabsParams {
+        header_item_add_css: css! {"
+            border: 1px solid black;
+            padding: 0px 10px;
+        "},
+        header_active_item_add_css: css! {"
+            background-color: lightgray;
+        "},
+        content_css: css! {"
+            border: solid 1px black;
+            padding: 5px 10px;
+        "},
+        container_css: css! {"
+            margin: 10px;
+        "},
+        ..Default::default()
+    }
+}
diff --git a/storybook/src/tabs.rs b/storybook/src/tabs.rs
index 23f2422..b75f020 100644
--- a/storybook/src/tabs.rs
+++ b/storybook/src/tabs.rs
@@ -3,6 +3,8 @@ use std::rc::Rc;
 use vertigo::{bind_rc, dom, DomNode, Value};
 use vertigo_forms::{Tab, TabsContentMapped, TabsHeader};
 
+use crate::bordered_tabs;
+
 #[derive(Clone, PartialEq)]
 pub enum MyView {
     View1,
@@ -54,7 +56,7 @@ pub fn tabs() -> DomNode {
             <TabsHeader
                 current_tab={&current_tab}
                 tabs={tabs.clone()}
-                params={}
+                params={bordered_tabs()}
             />
             <TabsContentMapped
                 current_tab={current_tab.to_computed()}
@@ -65,7 +67,7 @@ pub fn tabs() -> DomNode {
                         MyView::View2SubView1 | MyView::View2SubView2 => MyView::View2SubView1,
                     }
                 )}
-                params={}
+                params={bordered_tabs()}
             />
         </p>
     }