required input (#264)

* required input

* review fixes

thaw/src/field/docs/mod.md

@@ -117,6 +117,35 @@ view! {
 }
 ```
 
+### Required
+
+```rust demo
+view! {
+    <form>
+        <FieldContextProvider>
+            <Field label="Username" name="username" required=true>
+                <Input rules=vec![InputRule::required(true.into())]/>
+            </Field>
+            <div style="margin-top: 8px">
+                <Button
+                    button_type=ButtonType::Submit
+                    on_click={
+                        let field_context = FieldContextInjection::expect_context();
+                        move |e: ev::MouseEvent| {
+                            if !field_context.validate() {
+                                e.prevent_default();
+                            }
+                        }
+                    }
+                >
+                    "Submit"
+                </Button>
+            </div>
+        </FieldContextProvider>
+    </form>
+}
+```
+
 ### Field Props
 
 | Name | Type | Default | Desciption |
@@ -125,6 +154,7 @@ view! {
 | label | `MaybeProp<String>` | `Default::default()` | The label associated with the field. |
 | name | `MaybeProp<String>` | `Default::default()` | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. |
 | orientation | `MaybeSignal<FieldOrientation>` | `FieldOrientation::Vertical` | The orientation of the label relative to the field component. |
+| reqired | `MaybeSignal<bool>` | `false` | If set to true this field will be marked as required. |
 | children | `Children` |  |  |
 
 ### FieldContextProvider Props

thaw/src/field/field.css

@@ -12,6 +12,11 @@
     color: var(--colorNeutralForeground1);
 }
 
+.thaw-field__label--required {
+    padding-left: var(--spacingHorizontalXS);
+    color: var(--colorPaletteRedForeground3);
+}
+
 .thaw-field--horizontal {
     grid-template-columns: 33% 1fr;
     grid-template-rows: auto auto auto 1fr;

thaw/src/field/field.rs

@@ -1,5 +1,5 @@
 use leptos::{context::Provider, either::EitherOf3, prelude::*};
-use thaw_components::OptionComp;
+use thaw_components::{OptionComp, If, Then};
 use thaw_utils::{class_list, mount_style};
 use uuid::Uuid;
 
@@ -16,6 +16,9 @@ pub fn Field(
     /// The orientation of the label relative to the field component.
     #[prop(optional, into)]
     orientation: MaybeSignal<FieldOrientation>,
+    ///Is this input field required
+    #[prop(optional, into)]
+    required: MaybeSignal<bool>,
     children: Children,
 ) -> impl IntoView {
     mount_style("field", include_str!("./field.css"));
@@ -46,6 +49,11 @@ pub fn Field(
                         <OptionComp value=label.get() let:label>
                             <label class="thaw-field__label" for=id.get_value()>
                                 {label}
+                                <If cond=required>
+                                    <Then slot>
+                                        <span class="thaw-field__label--required">*</span>
+                                    </Then>
+                                </If>
                             </label>
                         </OptionComp>
                     }