Input

Gallery::Data.input_examples.each do |input|
  sample(input.label, slug: input.slug) do
    render_input(input)
  end
end

sample("Checked checkbox", slug: "checkbox") do
  render NitroKit::Input.new(
    type: :checkbox,
    id: "gallery-input-checkbox",
    name: "preferences[weekly_digest]",
    value: "1",
    checked: true,
    aria: { label: "Send weekly digest" }
  )
end
sample("File upload", slug: "file") do
  render NitroKit::Input.new(
    type: :file,
    id: "gallery-input-file",
    name: "profile[avatar]",
    accept: "image/png,image/jpeg",
    aria: { label: "Profile image" }
  )
end
sample("Range", slug: "range") do
  render NitroKit::Input.new(
    type: :range,
    id: "gallery-input-range",
    name: "notifications[volume]",
    value: 60,
    min: 0,
    max: 100,
    step: 10,
    aria: { label: "Notification volume" }
  )
end

sample("Invalid", slug: "invalid") do
  render NitroKit::Input.new(
    type: :email,
    id: "gallery-input-invalid",
    name: "billing[email]",
    value: "not-an-email",
    required: true,
    aria: { label: "Billing email", invalid: true, describedby: "gallery-input-invalid-error" }
  )
  p(id: "gallery-input-invalid-error") { "Enter a valid email address" }
end
sample("Read only", slug: "readonly") do
  render NitroKit::Input.new(
    id: "gallery-input-readonly",
    value: "acct_42NK",
    readonly: true,
    aria: { label: "Account identifier" }
  )
end
sample("Disabled", slug: "disabled") do
  render NitroKit::Input.new(
    id: "gallery-input-disabled-state",
    value: "Unavailable",
    disabled: true,
    aria: { label: "Legacy setting" }
  )
end