diff --git a/src/components/header.rs b/src/components/header.rs
new file mode 100644
index 0000000..c6055a0
--- /dev/null
+++ b/src/components/header.rs
@@ -0,0 +1,40 @@
+use leptos::prelude::*;
+
+/// # Header Component
+///
+/// A simple header that may also contain a description. Should be used to annotate sections and
+/// forms, with extra information about how that section/form will work.
+///
+/// Example usage:
+/// ```
+/// view! {
+///
+/// }
+/// ```
+#[component]
+pub fn Header(
+ /// The title of the header. Must always be present.
+ #[prop(into)] title: Signal,
+ /// The description of the header. Hidden when nothing i s
+ #[prop(optional, into)] description: Signal,
+) -> impl IntoView {
+ let show_description = Signal::derive(move || {
+ !description.get().is_empty()
+ });
+
+ view! {
+
+
+ {title}
+
+
+
+ {description}
+
+
+
+ }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 2de29d8..a5f210f 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -10,9 +10,10 @@ mod utils;
mod validated_form;
mod lists;
mod toasts;
+mod header;
pub use self::{
action_button::*, banner::*, dashboard_button::*, lists::*,
loading::*, multi_entry::*, panel::*, row::*, text_field::*,
- validated_form::*, toasts::*
+ validated_form::*, toasts::*, header::*
};
diff --git a/src/components/validated_form.rs b/src/components/validated_form.rs
index c19d45d..ffdd0c2 100644
--- a/src/components/validated_form.rs
+++ b/src/components/validated_form.rs
@@ -1,7 +1,7 @@
use leptos::logging::log;
use leptos::prelude::*;
use leptos::web_sys::SubmitEvent;
-use crate::components::ActionButton;
+use crate::components::{ActionButton, Header};
/// Indicates the current state of an input.
#[derive(Default, Debug, Clone)]
@@ -71,7 +71,11 @@ pub fn use_validation_context() -> Option {
/// Example usage in the view macro:
/// ```
/// view! {
-///
+///
/// {/* As many input components as you want */}
///
/// }
@@ -102,6 +106,10 @@ pub fn ValidatedForm(
children: Children,
/// A callback that runs when the form successfully validates.
#[prop(into)] on_submit: Callback<()>,
+ /// The title of the included header.
+ #[prop(into)] title: Signal,
+ /// The description for the included header.
+ #[prop(optional, into)] description: Signal,
) -> impl IntoView {
let validators = RwSignal::new(vec![]);
@@ -142,6 +150,10 @@ pub fn ValidatedForm(
view! {