Checkbox

<.checkbox field={f[:elixir]} label="Elixir" value="elixir" />

<.checkbox_group field={f[:languages]} label="Languages" description="Select your favorite languages">
  <:checkbox label="Elixir" value="elixir" />
  <:checkbox label="Clojure" value="clojure" />
  <:checkbox label="Haskell" value="haskell" />
</.checkbox_group>

<.form :let={f} for={%{}}>
  <.checkbox
    field={f[:elixir]}
    checked
    label="Elixir"
    value="elixir"
    description="Concurrent, fault-tolerant language."
  />
  <.checkbox
    field={f[:clojure]}
    checked
    label="Clojure"
    value="clojure"
    description="Functional language for the JVM."
  />
  <.checkbox
    field={f[:haskell]}
    label="Haskell"
    value="haskell"
    description="Purely functional, statically typed language."
  />
</.form>

<.form :let={f} for={%{}}>
  <.checkbox field={f[:elixir]} label="Elixir" value="elixir" sublabel="Concurrent functional programming" />
  <.checkbox field={f[:clojure]} label="Clojure" value="clojure" sublabel="Functional JVM language" />
  <.checkbox field={f[:haskell]} label="Haskell" value="haskell" sublabel="Purely functional language" />
</.form>

<.form :let={f} for={%{}}>
  <.checkbox
    type="checkbox"
    checked
    disabled
    field={f[:elixir]}
    label="Elixir"
    value="elixir"
    description="Concurrent, fault-tolerant language."
  />
  <.checkbox
    type="checkbox"
    disabled
    field={f[:cpp]}
    label="C++"
    value="c++"
    description="High-performance, compiled language."
  />
</.form>

<.form
  :let={f}
  for={
    to_form(%{"ruby_on_rails" => "true", "nextjs" => "true"},
      errors: [
        ruby_on_rails: {"At least 500 cores is required", []},
        nextjs: {"At least 2GB needed for the bundle is required", []}
      ]
    )
  }
>
  <.checkbox field={f[:phoenix]} label="Phoenix" sublabel="Web framework for Elixir" />
  <.checkbox field={f[:ruby_on_rails]} label="Ruby on Rails" sublabel="Web framework for Ruby"/>
  <.checkbox field={f[:nextjs]} label="Next.js" sublabel="React framework for production" />
</.form>

<.checkbox
  field={f[:frontend]}
  variant="card"
  label="Frontend"
  sublabel="Web Technologies"
  description="HTML, CSS, JavaScript"
  value="frontend"
/>

<.checkbox_group
  variant="card"
  label="Programming Languages"
  description="Select your favorite programming languages"
  field={f[:languages]}
  class="grid grid-cols-3 gap-2"
>
  <:checkbox value="elixir" label="Elixir" />
  <:checkbox value="javascript" label="JavaScript" />
  <:checkbox value="python" label="Python" />
  <:checkbox value="ruby" label="Ruby" />
  <:checkbox value="rust" label="Rust" />
  <:checkbox value="go" label="Go" />
</.checkbox_group>

<.checkbox
  control="left"
  field={f[:frontend]}
  variant="card"
  label="Frontend"
  sublabel="Web Technologies"
  description="HTML, CSS, JavaScript"
  value="frontend"
/>

<.checkbox
  control="right"
  field={f[:backend]}
  variant="card"
  label="Backend"
  sublabel="Server Technologies"
  description="Elixir, Phoenix, PostgreSQL"
  value="backend"
/>

<.checkbox_group
  field={f[:categories]}
  variant="card"
  label="Categories"
  description="Select your favorite categories"
  class="grid grid-cols-3"
>
  <:checkbox
    :for={
      {label, value, icon} <- [
        {"Web Design", "web_design", "hero-window"},
        {"UI/UX Design", "ui_ux", "hero-pencil-square"},
        {"Desktop", "desktop", "hero-computer-desktop"},
        {"SEO", "seo", "hero-magnifying-glass"},
        {"Artificial Intelligence", "ai", "hero-sparkles"},
        {"Development", "development", "hero-code-bracket-square"}
      ]
    }
    value={value}
    class="flex-1 relative group has-checked:border-blue-500 has-checked:bg-blue-50 dark:border-zinc-700 dark:bg-zinc-800 dark:has-checked:bg-blue-950"
  >
    <.icon
      name="hero-check-circle-solid"
      class="group-has-checked:block hidden absolute top-2 right-2 size-6 text-zinc-500 dark:text-zinc-400 group-has-checked:text-blue-500"
    />
    <div class="flex flex-col items-center justify-center w-full gap-2">
      <.icon name={icon} class="size-6 text-zinc-500 dark:text-zinc-400 group-has-checked:text-blue-500" />
      <span class="font-medium text-sm group-has-checked:text-blue-600 dark:text-zinc-300 dark:group-has-checked:text-zinc-100">
        {label}
      </span>
    </div>
  </:checkbox>
</.checkbox_group>

<.checkbox_group
  label="Weekdays"
  description="Select the days of the week you want to work"
  name="weekdays"
  value={["mon", "tue", "wed"]}
  variant="card"
  class="flex gap-x-2"
>
  <:checkbox
    :for={
      {label, value} <- [
        {"S", "sun"},
        {"M", "mon"},
        {"T", "tue"},
        {"W", "wed"},
        {"T", "thu"},
        {"F", "fri"},
        {"S", "sat"}
      ]
    }
    label={label}
    value={value}
    class="flex items-center justify-center rounded-full has-checked:border-zinc-300 has-checked:bg-zinc-100 text-zinc-700 has-checked:text-white size-10"
  />
</.checkbox_group>

<.checkbox_group
    label="Tags"
    description="Select the tags you want to apply to your project"
    name="tags"
    variant="card"
    class="flex flex-wrap w-96"
  >
    <:checkbox
      :for={
        {label, value} <- [
          {"Modern", "modern"},
          {"Minimalist", "minimalist"},
          {"Vintage", "vintage"},
          {"Retro", "retro"},
          {"Elegant", "elegant"},
          {"Classic", "classic"},
          {"Contemporary", "contemporary"},
          {"Industrial", "industrial"},
          {"Rustic", "rustic"},
          {"Bohemian", "bohemian"}
        ]
      }
      class="text-sm text-zinc-700 flex items-center justify-center font-medium gap-1 px-2.5 py-0.5 rounded-full group has-checked:bg-green-100 has-checked:border-green-500 has-checked:text-green-800"
      value={value}
    >
      <.icon name="hero-check" class="size-4 group-has-checked:block hidden" /> {label}
    </:checkbox>
  </.checkbox_group>