Label

sample("Input", slug: "input") do
  render NitroKit::Label.new(
    "Billing email",
    for: "gallery-label-email",
    id: "gallery-label-email-label"
  )
  render NitroKit::Input.new(
    type: :email,
    id: "gallery-label-email",
    name: "billing[email]",
    value: "[email protected]",
    required: true
  )
end
sample("Textarea", slug: "textarea") do
  render NitroKit::Label.new(
    "Invitation message",
    for: "gallery-label-message",
    id: "gallery-label-message-label"
  )
  render NitroKit::Textarea.new(
    id: "gallery-label-message",
    name: "invitation[message]",
    value: "Join the release planning workspace."
  )
end
sample("Select", slug: "select") do
  render NitroKit::Label.new(
    "Workspace role",
    for: "gallery-label-role",
    id: "gallery-label-role-label"
  )
  render NitroKit::Select.new(
    id: "gallery-label-role",
    name: "member[role]",
    value: "member",
    options: [ [ "Administrator", "admin" ], [ "Member", "member" ] ]
  )
end

sample("Block content", slug: "block") do
  render NitroKit::Label.new(for: "gallery-label-search", id: "gallery-label-search-label") do
    strong { "Search" }
    plain(" workspace members")
  end
  render NitroKit::Input.new(
    type: :search,
    id: "gallery-label-search",
    name: "members[query]",
    placeholder: "Name or email"
  )
end
sample("Long label", slug: "long") do
  render NitroKit::Label.new(
    "Describe the production incident and include the customer-visible impact, affected regions, and recovery timeline",
    for: "gallery-label-incident",
    id: "gallery-label-incident-label"
  )
  render NitroKit::Textarea.new(
    id: "gallery-label-incident",
    name: "incident[summary]",
    value: ""
  )
end

profile = Gallery::FormExamples.profile

form_with(
  model: profile,
  scope: :profile,
  url: "#profile-labels",
  builder: NitroKit::FormBuilder,
  id: "gallery-label-profile-form"
) do |form|
  form.field(:name, id: "gallery-label-profile-name", required: true)
  form.field(
    :email,
    as: :email,
    id: "gallery-label-profile-email",
    label: "Account email",
    description: "Used for recovery and security notices."
  )
end