Input

div(class: 'grid w-full max-w-sm items-center gap-1.5') do
	Input(type: "email", placeholder: "Email")
end

div(class: "grid w-full max-w-sm items-center gap-1.5") do
	FormItem do
		Label(for: "picture") { "Picture" }
		Input(type: "file", id: "picture")
	end
end

div(class: 'grid w-full max-w-sm items-center gap-1.5') do
	Input(disabled: true, type: "email", placeholder: "Email")
end

div(class: 'grid w-full max-w-sm items-center gap-1.5') do
	FormItem do
		Label(for: "email1") { "Email" }
		Input(type: "email", placeholder: "Email", id: "email1")
	end
end

div(class: 'grid w-full max-w-sm items-center gap-1.5') do
	FormItem do
		Label(for: "email1") { "Email" }
		Input(type: "email", placeholder: "Email", id: "email1", value: "joel@mail", error: "Invalid email address")
	end
end

div(class: 'flex w-full max-w-sm items-center space-x-2') do
	Input(type: "email", placeholder: "Email")
	Button { "Subscribe" }
end

Form(class: 'w-full max-w-sm') do
	FormSpacer do
		FormItem do
			Label(for: "username") { "Username" }
			Input(type: "string", placeholder: "Username", id: "username")
			Hint { "Can only contain letters, numbers, and underscores." }
		end
		Button(type: "submit") { "Submit" }
	end
end