Forms

Use forms for...

Form Layouts

Use form layouts for...

Profile

This information will be displayed publicly so be careful what you share.

Name

This field is required

About

This field is required

Write a few sentences about yourself.

Personal Information

Use a permanent address where you can receive mail.

First name

Last name

Location

This field is required

Select your location...

Street address

City

State / Province

ZIP / Postal code

Check if you love checkboxes

Notifications

We'll always let you know about important changes, but you pick what else you want to hear about.

By Email

Comments

Get notified when someones posts a comment on a posting.

Candidates

Get notified when a candidate applies for a job.

Offers

Get notified when a candidate accepts or rejects an offer

Push Notifications

These are delivered via SMS to your mobile phone.

Push Notifications

Everything

Same as email

No push notifications

import { option } from "@hedia/html/elements";
import { ButtonKind } from "@hedia/windfall/css/buttons";
import { FieldCols, InputTextTransform } from "@hedia/windfall/css/forms";
import { button } from "@hedia/windfall/html/buttons";
import {
	checkbox,
	fieldset,
	form,
	formBody,
	formFooter,
	formSection,
	formSectionBody,
	formSectionHeader,
	formSectionHeading,
	formSectionSubHeading,
	inputField,
	legend,
	radio,
	radioGroup,
	selectField,
	textareaField,
} from "@hedia/windfall/html/forms";

form(
	formBody(
		formSection(
			formSectionHeader(
				formSectionHeading("Profile"),
				formSectionSubHeading(
					"This information will be displayed publicly so be careful what you share.",
				),
			),
			formSectionBody(
				inputField({
					field: {
						cols: FieldCols.Three,
					},
					input: {
						type: "text",
						name: "name",
					},
					label: "Name",
				}),
				textareaField({
					field: {},
					helpText: "Write a few sentences about yourself.",
					label: "About",
					textarea: {
						name: "about",
					},
				}),
			),
		),
		formSection(
			formSectionHeader(
				formSectionHeading("Personal Information"),
				formSectionSubHeading("Use a permanent address where you can receive mail."),
			),
			formSectionBody(
				inputField({
					field: {
						cols: FieldCols.Three,
					},
					input: {
						type: "text",
						name: "firstName",
					},
					label: "First name",
				}),
				inputField({
					field: {
						cols: FieldCols.Three,
					},
					input: {
						type: "text",
						name: "lastName",
					},
					label: "Last name",
				}),
				inputField({
					field: {
						cols: FieldCols.Three,
					},
					input: {
						type: "email",
						name: "email",
					},
					label: "Email",
				}),
				selectField(
					{
						field: {
							cols: FieldCols.Three,
						},
						helpText: "Select your location...",
						label: "Location",
						select: {
							name: "location",
						},
					},
					option("Denmark"),
					option("Norway"),
					option("Sweden"),
				),
				inputField({
					field: {
						cols: FieldCols.Six,
					},
					input: {
						name: "streetAddress",
						type: "text",
					},
					label: "Street address",
				}),
				inputField({
					field: {
						cols: FieldCols.Two,
					},
					input: {
						name: "city",
						type: "text",
					},
					label: "City",
				}),
				inputField({
					field: {
						cols: FieldCols.Two,
					},
					input: {
						name: "stateOrProvince",
						type: "text",
					},
					label: "State / Province",
				}),
				inputField({
					field: {
						cols: FieldCols.Two,
					},
					input: {
						name: "zipOrPostalcode",
						textTransform: InputTextTransform.Uppercase,
						type: "text",
					},
					label: "ZIP / Postal code",
				}),
				checkbox({
					checked: false,
					value: "true",
					name: "checkboxLove",
					heading: "Check if you love checkboxes",
				}),
			),
		),
		formSection(
			formSectionHeader(
				formSectionHeading("Notifications"),
				formSectionSubHeading(
					"We'll always let you know about important changes, but you pick what else you want to hear about.",
				),
			),
			formSectionBody(
				fieldset(
					legend("By Email"),
					checkbox({
						checked: false,
						heading: "Comments",
						description: "Get notified when someones posts a comment on a posting.",
						name: "comments",
					}),
					checkbox({
						checked: false,
						heading: "Candidates",
						description: "Get notified when a candidate applies for a job.",
						name: "candidates",
					}),
					checkbox({
						checked: true,
						heading: "Offers",
						description: "Get notified when a candidate accepts or rejects an offer",
						name: "offers",
					}),
				),
			),
		),
		formSection(
			formSectionHeader(
				formSectionHeading("Push Notifications"),
				formSectionSubHeading("These are delivered via SMS to your mobile phone."),
			),
			formSectionBody(
				fieldset(
					legend("Push Notifications"),
					radioGroup(
						radio({
							checked: true,
							heading: "Everything",
							name: "push-notifications",
							value: "Everything",
						}),
						radio({
							checked: false,
							heading: "Same as email",
							name: "push-notifications",
							value: "same-as-email",
						}),
						radio({
							checked: false,
							heading: "No push notifications",
							name: "push-notifications",
							value: "no-push-notifications",
						}),
					),
				),
			),
		),
	),
	formFooter(
		button({ kind: ButtonKind.Primary }, "Save"),
		button({ kind: ButtonKind.Secondary }, "Cancel"),
	),
),

Forms in Cards

Use forms in cards for...

import { ButtonKind, ButtonSize } from "@hedia/windfall/css/buttons";
import { FieldCols } from "@hedia/windfall/css/forms";
import { button } from "@hedia/windfall/html/buttons";
import {
	form,
	formBody,
	formFooter,
	formSection,
	formSectionBody,
	formSectionHeader,
	formSectionHeading,
	formSectionSubHeading,
	inputField,
	textareaField,
} from "@hedia/windfall/html/forms";
import { card } from "@hedia/windfall/html/panels";

card(
	form(
		formBody(
			formSection(
				formSectionHeader(
					formSectionHeading("Profile"),
					formSectionSubHeading(
						"This information will be displayed publicly so be careful what you share.",
					),
				),
				formSectionBody(
					inputField({
						field: {
							cols: FieldCols.Three,
						},
						input: {
							type: "text",
							name: "name",
						},
						label: "Name",
					}),
					textareaField({
						field: {},
						helpText: "Write a few sentences about yourself.",
						label: "About",
						textarea: {
							name: "about",
						},
					}),
				),
			),
		),
		formFooter(
			button({ kind: ButtonKind.Primary, size: ButtonSize.Medium }, "Save"),
			button({ kind: ButtonKind.Secondary, size: ButtonSize.Medium }, "Cancel"),
		),
	),
),

Code Input

Use code inputs for...

Landing Forms

Use landing forms for...

import { logo, LogoContext, LogoSize } from "@hedia/brand/html";
import { div } from "@hedia/html/elements";
import { ButtonKind, ButtonShape, ButtonSize } from "@hedia/windfall/css/buttons";
import { ContainerSize } from "@hedia/windfall/css/containers";
import { FormBodyAlignment } from "@hedia/windfall/css/forms";
import { button } from "@hedia/windfall/html/buttons";
import { form, formBody, formFooter } from "@hedia/windfall/html/forms";

form(
	formBody(
		{ containerSize: ContainerSize.ExtraSmall, alignment: FormBodyAlignment.Center },
		div({ class: "self-center" }, logo({ context: LogoContext.Product, size: LogoSize.Large })),
	),
	formFooter(
		{ containerSize: ContainerSize.ExtraSmall },
		button(
			{
				kind: ButtonKind.Primary,
				size: ButtonSize.ExtraLarge,
				href: "#",
			},
			"Sign up",
		),
		button(
			{
				kind: ButtonKind.Secondary,
				size: ButtonSize.ExtraLarge,
				href: "#",
			},
			"Log in",
		),
	),
),

Sign up Forms

Use sign up forms for...

import { option } from "@hedia/html/elements";
import { earthOutlineIcon, lockOutlineIcon, mailOutlineIcon, userOutlineIcon } from "@hedia/iconly/outline";
import { ButtonKind, ButtonShape, ButtonSize } from "@hedia/windfall/css/buttons";
import { ContainerSize } from "@hedia/windfall/css/containers";
import { InputSize, SelectSize } from "@hedia/windfall/css/forms";
import { AlignItems, FlexDirection, Gap } from "@hedia/windfall/css/layouts";
import { button } from "@hedia/windfall/html/buttons";
import {
	form,
	formBody,
	formFooter,
	formSection,
	formSectionBody,
	formSectionHeader,
	formSectionHeading,
	formSectionSubHeading,
	inputField,
	selectField,
} from "@hedia/windfall/html/forms";

form(
	formBody(
		{ containerSize: ContainerSize.ExtraSmall },
		formSection(
			formSectionHeader(
				formSectionHeading("Create account"),
				formSectionSubHeading("Create an account to access Hedia."),
			),
			formSectionBody(
				layout(
					{
						gap: Gap.ExtraLarge,
						flexDirection: FlexDirection.Col,
						alignItems: AlignItems.Stretch,
					},
					layout(
						{
							gap: Gap.Medium,
							flexDirection: FlexDirection.Col,
							alignItems: AlignItems.Stretch,
						},
						inputField({
							input: {
								icon: userOutlineIcon(),
								type: "text",
								placeholder: "Name",
								name: "name-2",
								size: InputSize.ExtraLarge,
							},
						}),
						inputField({
							input: {
								icon: mailOutlineIcon(),
								type: "email",
								placeholder: "Email",
								name: "email-2",
								size: InputSize.ExtraLarge,
							},
						}),
						inputField({
							input: {
								icon: lockOutlineIcon(),
								type: "password",
								placeholder: "Password",
								name: "password-2",
								size: InputSize.ExtraLarge,
							},
						}),
						selectField(
							{
								select: {
									icon: earthOutlineIcon(),
									name: "country-2",
									required: true,
									size: SelectSize.ExtraLarge,
								},
							},
							option({ value: "" }, "Select country ..."),
							option({ value: "DNK" }, "Denmark"),
							option({ value: "NOR" }, "Norway"),
							option({ value: "SWE" }, "Sweden"),
						),
					),
				),
			),
		),
	),
	formFooter(
		{ containerSize: ContainerSize.ExtraSmall },
		button(
			{
				kind: ButtonKind.Primary,
				size: ButtonSize.ExtraLarge,
				shape: ButtonShape.Base,
			},
			"Sign up",
		),
	),
),

Log in Forms

Use log in forms for...

import { lockOutlineIcon, mailOutlineIcon } from "@hedia/iconly/outline";
import { ButtonKind, ButtonShape, ButtonSize } from "@hedia/windfall/css/buttons";
import { ContainerSize } from "@hedia/windfall/css/containers";
import { InputSize } from "@hedia/windfall/css/forms";
import { AlignItems, FlexDirection, Gap } from "@hedia/windfall/css/layouts";
import { LinkKind } from "@hedia/windfall/css/links";
import { button } from "@hedia/windfall/html/buttons";
import {
	form,
	formBody,
	formFooter,
	formSection,
	formSectionBody,
	formSectionHeader,
	formSectionHeading,
	formSectionSubHeading,
	inputField,
} from "@hedia/windfall/html/forms";
import { layout } from "@hedia/windfall/html/layouts";
import { link } from "@hedia/windfall/html/links";

form(
	formBody(
		{ containerSize: ContainerSize.ExtraSmall },
		formSection(
			formSectionHeader(
				formSectionHeading("Welcome back"),
				formSectionSubHeading("Log in to your Hedia account please."),
			),
			formSectionBody(
				layout(
					{
						gap: Gap.ExtraLarge,
						flexDirection: FlexDirection.Col,
						alignItems: AlignItems.Stretch,
					},
					layout(
						{
							gap: Gap.Medium,
							flexDirection: FlexDirection.Col,
							alignItems: AlignItems.Stretch,
						},
						inputField({
							input: {
								icon: mailOutlineIcon(),
								type: "email",
								placeholder: "Email",
								name: "email-3",
								size: InputSize.ExtraLarge,
								required: true,
							},
						}),
						inputField({
							input: {
								icon: lockOutlineIcon(),
								type: "password",
								placeholder: "Password",
								name: "password-3",
								size: InputSize.ExtraLarge,
								required: true,
							},
						}),
					),
					layout(
						{
							flexDirection: FlexDirection.Col,
							alignItems: AlignItems.Center,
						},
						link({ href: "#", kind: LinkKind.Plain }, "Forgot password?"),
					),
				),
			),
		),
	),
	formFooter(
		{ containerSize: ContainerSize.ExtraSmall },
		button(
			{
				kind: ButtonKind.Primary,
				size: ButtonSize.ExtraLarge,
				shape: ButtonShape.Base,
			},
			"Log in",
		),
	),
),

Long form

Use long forms for...

import { option } from "@hedia/html/elements";
import { ButtonKind, ButtonSize } from "@hedia/windfall/css/buttons";
import { ContainerSize } from "@hedia/windfall/css/containers";
import { FieldCols, InputSize, SelectSize } from "@hedia/windfall/css/forms";
import { button } from "@hedia/windfall/html/buttons";
import {
	form,
	formBody,
	formFooter,
	formSection,
	formSectionBody,
	formSectionHeader,
	formSectionHeading,
	formSectionSubHeading,
	inputField,
	selectField,
} from "@hedia/windfall/html/forms";

form(
	formBody(
		{ containerSize: ContainerSize.ExtraSmall },
		formSection(
			formSectionHeader(
				formSectionHeading("Personal Information"),
				formSectionSubHeading("Use a permanent address where you can receive mail."),
			),
			formSectionBody(
				inputField({
					field: {
						cols: FieldCols.Three,
					},
					input: {
						type: "text",
						name: "firstName",
						size: InputSize.ExtraLarge,
					},
					label: "First name",
				}),
				inputField({
					field: {
						cols: FieldCols.Three,
					},
					input: {
						type: "text",
						name: "lastName",
						size: InputSize.ExtraLarge,
					},
					label: "Last name",
				}),
				inputField({
					field: {
						cols: FieldCols.Three,
					},
					input: {
						type: "email",
						name: "email",
						size: InputSize.ExtraLarge,
					},
					label: "Email",
				}),
				selectField(
					{
						field: {
							cols: FieldCols.Three,
						},
						helpText: "Select your location...",
						select: {
							name: "location",
							size: SelectSize.ExtraLarge,
						},
						label: "Location",
					},
					option("Denmark"),
					option("Norway"),
					option("Sweden"),
				),
				inputField({
					field: {
						cols: FieldCols.Six,
					},
					input: {
						type: "text",
						name: "streetAddress",
						size: InputSize.ExtraLarge,
					},
					label: "Street address",
				}),
				inputField({
					field: {
						cols: FieldCols.Two,
					},
					input: {
						type: "text",
						name: "city",
						size: InputSize.ExtraLarge,
					},
					label: "City",
				}),
				inputField({
					field: {
						cols: FieldCols.Two,
					},
					input: {
						type: "text",
						name: "stateOrProvince",
						size: InputSize.ExtraLarge,
					},
					label: "State / Province",
				}),
				inputField({
					field: {
						cols: FieldCols.Two,
					},
					input: {
						type: "text",
						name: "zipOrPostalcode",
						size: InputSize.ExtraLarge,
					},
					label: "ZIP / Postal code",
				}),
			),
		),
	),
	formFooter(
		{ alt: true, containerSize: ContainerSize.ExtraSmall },
		button({ kind: ButtonKind.Primary, size: ButtonSize.ExtraLarge }, "Save"),
		button({ href: "#", kind: ButtonKind.Secondary, size: ButtonSize.ExtraLarge }, "Cancel"),
	),
),

Authorization forms

Use authorization forms for...

import { li, p, ul } from "@hedia/html/elements";
import { ButtonKind, ButtonSize } from "@hedia/windfall/css/buttons";
import { ContainerSize } from "@hedia/windfall/css/containers";
import { FormBodyAlignment } from "@hedia/windfall/css/forms";
import { button } from "@hedia/windfall/html/buttons";
import { container } from "@hedia/windfall/html/containers";
import {
	form,
	formBody,
	formFooter,
	formSection,
	formSectionBody,
	formSectionHeader,
	formSectionHeading,
} from "@hedia/windfall/html/forms";
import { link } from "@hedia/windfall/html/links";

form(
	formBody(
		{ containerSize: ContainerSize.ExtraExtraSmall, alignment: FormBodyAlignment.Center },
		formSection(
			formSectionHeader(formSectionHeading("3rd Party wants access to your Hedia account")),
			formSectionBody(
				p("This will allow 3rd Party to:"),
				ul(
					{ class: "list-disc ml-8" },
					li(
						{ class: "leading-7 pb-4" },
						p({ class: "font-semibold" }, "Access your data"),
						p({ class: "text-white-600/80 text-sm" }, "Blood Glucose, Bolus Calculation"),
					),
					li(
						{ class: "leading-7 pb-4" },
						p({ class: "font-semibold" }, "Update your data"),
						p({ class: "text-white-600/80 text-sm" }, "Emails"),
					),
				),
				p(
					"For more information on how your personal data will be processed, please see the ",
					link({ href: "#" }, "privacy policy"),
					" of 3rd Party.",
				),
				p(
					"You always have the right to withdraw your consent at any time. To learn more, see Hedia's ",
					link({ href: "#" }, "privacy notice"),
					".",
				),
			),
		),
	),
	formFooter(
		{ alt: true, containerSize: ContainerSize.ExtraSmall },
		button({ kind: ButtonKind.Primary, size: ButtonSize.ExtraLarge }, "Allow"),
		button(
			{
				href: "#",
				kind: ButtonKind.Secondary,
				size: ButtonSize.ExtraLarge,
			},
			"Cancel",
		),
	),
),
),

Checkboxes

Use checkboxes for...

import { checkbox, fieldset, form, formBody, formSection, formSectionBody, legend } from "@hedia/windfall/html/forms";

form(
	formBody(
		formSection(
			formSectionBody(
				fieldset(
					legend("By Email"),
					checkbox({
						checked: true,
						heading: "Comments",
						description: "Get notified when someones posts a comment on a posting.",
						name: "comments",
					}),
					checkbox({
						checked: false,
						heading: "Candidates",
						description: "Get notified when a candidate applies for a job.",
						name: "candidates",
					}),
					checkbox({
						checked: true,
						heading: "Offers",
						description: "Get notified when a candidate accepts or rejects an offer",
						name: "offers",
					}),
				),
			),
		),
	),
),

Inputs

Use inputs for...

Basic input

Use basic inputs for...

import { FieldCols, InputSize } from "@hedia/windfall/css/forms";
import { form, formBody, formSection, formSectionBody, inputField } from "@hedia/windfall/html/forms";

form(
	formBody(
		formSection(
			formSectionBody(
				inputField({
					field: { cols: FieldCols.Six },
					input: { size: InputSize.Small, type: "text" },
					label: "Small",
				}),
				inputField({
					field: { cols: FieldCols.Six },
					input: { size: InputSize.Medium, type: "text" },
					label: "Medium",
				}),
				inputField({
					field: { cols: FieldCols.Six },
					input: { size: InputSize.Large, type: "text" },
					label: "Large",
				}),
				inputField({
					field: { cols: FieldCols.Six },
					input: { size: InputSize.ExtraLarge, type: "text" },
					label: "Extra Large",
				}),
				inputField({
					field: { cols: FieldCols.Six },
					input: { size: InputSize.ExtraExtraLarge, type: "text" },
					label: "Extra Extra Large",
				}),
			),
		),
	),
),

Input with icon

Use inputs with icons for...

import { callPhoneOutlineIcon, lockOutlineIcon, mailOutlineIcon } from "@hedia/iconly/outline";
import { FieldCols } from "@hedia/windfall/css/forms";
import { form, formBody, formSection, formSectionBody, inputField } from "@hedia/windfall/html/forms";

form(
	formBody(
		formSection(
			formSectionBody(
				inputField({
					field: { cols: FieldCols.Two },
					input: { icon: mailOutlineIcon(), type: "email" },
				}),
				inputField({
					field: { cols: FieldCols.Two },
					input: { icon: callPhoneOutlineIcon(), type: "phone" },
				}),
				inputField({
					field: { cols: FieldCols.Two },
					input: { icon: lockOutlineIcon(), type: "password" },
				}),
			),
		),
	),
),

Radio Groups

Use radio groups for...

import { fieldset, form, formBody, formSection, formSectionBody, legend, radio } from "@hedia/windfall/html/forms";

form(
	formBody(
		formSection(
			formSectionBody(
				fieldset(
					legend("Container Size"),
					radio({
						checked: false,
						heading: "Small",
						description: "4 GB RAM / 2 CPUS / 80 GB SSD Storage.",
						value: "small",
						name: "size",
					}),
					radio({
						checked: false,
						heading: "Medium",
						description: "8 GB RAM / 4 CPUS / 160 GB SSD Storage.",
						value: "medium",
						name: "size",
					}),
					radio({
						checked: true,
						heading: "Large",
						description: "16 GB RAM / 8 CPUS / 320 GB SSD Storage.",
						value: "large",
						name: "size",
					}),
				),
			),
		),
	),
),

Select Menus

Use select menus for...

import { option } from "@hedia/html/elements";
import { form, formBody, formSection, formSectionBody, selectField } from "@hedia/windfall/html/forms";

form(
	formBody(
		formSection(
			formSectionBody(
				selectField(
					{
						helpText: "Select your location...",
						label: "Location",
						select: { name: "location" },
					},
					option("Denmark"),
					option("Norway"),
					option("Sweden"),
				),
			),
		),
	),
),

Textareas

Use textareas for...

import { form, formBody, formSection, formSectionBody, textareaField } from "@hedia/windfall/html/forms";

form(
	formBody(
		formSection(
			formSectionBody(
				textareaField({
					helpText: "Add your comment to let others know what you think...",
					label: "Comment",
					textarea: {
						name: "comment",
						placeholder: "Add your comment...",
					},
				}),
			),
		),
	),
),

Toggles

Use toggles for...

import { fieldset, form, formBody, formSection, formSectionBody, toggle } from "@hedia/windfall/html/forms";

form(
	formBody(
		formSection(
			formSectionBody(
				fieldset(
					toggle({
						active: false,
					}),
					toggle({
						active: true,
					}),
				),
			),
		),
	),
),