diff --git a/thaw/src/field/docs/mod.md b/thaw/src/field/docs/mod.md index b1070be..91706f1 100644 --- a/thaw/src/field/docs/mod.md +++ b/thaw/src/field/docs/mod.md @@ -117,6 +117,35 @@ view! { } ``` +### Required + +```rust demo +view! { +
+ + + + +
+ +
+
+
+} +``` + ### Field Props | Name | Type | Default | Desciption | @@ -125,6 +154,7 @@ view! { | label | `MaybeProp` | `Default::default()` | The label associated with the field. | | name | `MaybeProp` | `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::Vertical` | The orientation of the label relative to the field component. | +| reqired | `MaybeSignal` | `false` | If set to true this field will be marked as required. | | children | `Children` | | | ### FieldContextProvider Props diff --git a/thaw/src/field/field.css b/thaw/src/field/field.css index a05d04e..579a3d1 100644 --- a/thaw/src/field/field.css +++ b/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; diff --git a/thaw/src/field/field.rs b/thaw/src/field/field.rs index a5c81a6..eecfcfa 100644 --- a/thaw/src/field/field.rs +++ b/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, + ///Is this input field required + #[prop(optional, into)] + required: MaybeSignal, children: Children, ) -> impl IntoView { mount_style("field", include_str!("./field.css")); @@ -46,6 +49,11 @@ pub fn Field( }