تنسيق Select ·

    <.select class="select" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Default</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--accent" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Accent</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--brand" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Brand</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--alert" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Alert</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--info" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Info</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--success" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Success</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

  

    <.select class="select select--sm" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--lg" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

  

    <.select class="select select--text-sm" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--text-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--text-2xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--text-4xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

  

    <.select class="select select--rounded-none" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--rounded-md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--rounded-lg" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--rounded-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--rounded-full" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

  

    <.select class="select max-w-2xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select max-w-md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select max-w-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select max-w-2xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>