File Upload Live

Style

Same file-upload modifier classes on the root (semantic, size, radius, max width). Live upload uses the same stylesheet.

Hex doc

Phoenix

Semantic

Use class="ui-{role}" to set the semantic palette of a file upload.

Available options: accent, alert, brand, info, success

Default

Drag your file(s) here

Accent

Drag your file(s) here

Brand

Drag your file(s) here

Alert

Drag your file(s) here

Info

Drag your file(s) here

Success

Drag your file(s) here

    <.file_upload name="document" class="file-upload">
  <:label>Default</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-accent">
  <:label>Accent</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-brand">
  <:label>Brand</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-alert">
  <:label>Alert</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-info">
  <:label>Info</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-success">
  <:label>Success</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

Variant

Variant modifiers control file-upload surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

Subtle (default)

Drag your file(s) here

Solid

Drag your file(s) here

    <.file_upload name="document" class="file-upload">
  <:label>Subtle (default)</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-solid">
  <:label>Solid</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example file-upload ui-accent ui-solid.

Base

Drag your file(s) here

Base

Drag your file(s) here

Base

Drag your file(s) here

Accent

Drag your file(s) here

Accent

Drag your file(s) here

Accent

Drag your file(s) here

Alert

Drag your file(s) here

Alert

Drag your file(s) here

Alert

Drag your file(s) here

Brand

Drag your file(s) here

Brand

Drag your file(s) here

Brand

Drag your file(s) here

Info

Drag your file(s) here

Info

Drag your file(s) here

Info

Drag your file(s) here

Success

Drag your file(s) here

Success

Drag your file(s) here

Success

Drag your file(s) here

    <.file_upload name="document" class="file-upload">
  <:label>Base</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-solid">
  <:label>Base</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-ghost">
  <:label>Base</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-accent">
  <:label>Accent</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-accent ui-solid">
  <:label>Accent</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-accent ui-ghost">
  <:label>Accent</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-alert">
  <:label>Alert</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-alert ui-solid">
  <:label>Alert</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-alert ui-ghost">
  <:label>Alert</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-brand">
  <:label>Brand</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-brand ui-solid">
  <:label>Brand</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-brand ui-ghost">
  <:label>Brand</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-info">
  <:label>Info</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-info ui-solid">
  <:label>Info</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-info ui-ghost">
  <:label>Info</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-success">
  <:label>Success</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-success ui-solid">
  <:label>Success</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload ui-success ui-ghost">
  <:label>Success</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

Size

Use class="ui-size-{size}" to set the size of a file upload.

Available options: xs, sm, md (default), lg, xl

Drag your file(s) here

    <.file_upload name="document" class="file-upload ui-size-sm">
  <:label>SM</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-size-md">
  <:label>MD</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-size-lg">
  <:label>LG</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-size-xl">
  <:label>XL</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a file upload.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

None

Drag your file(s) here

Full

Drag your file(s) here

    <.file_upload name="document" class="file-upload ui-rounded-none">
  <:label>None</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-rounded-sm">
  <:label>SM</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-rounded-md">
  <:label>MD</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-rounded-lg">
  <:label>LG</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-rounded-xl">
  <:label>XL</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>
<.file_upload name="document" class="file-upload ui-rounded-full">
  <:label>Full</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

Max width

Without max-w-*, width comes from component CSS. Default for file-upload: md (width: 100%).

Use class="max-w-{step}" to set the maximum width of a file upload root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (md)

Drag your file(s) here

none

Drag your file(s) here

full

Drag your file(s) here

9xs

Drag your file(s) here

8xs

Drag your file(s) here

7xs

Drag your file(s) here

6xs

Drag your file(s) here

5xs

Drag your file(s) here

4xs

Drag your file(s) here

3xs

Drag your file(s) here

2xs

Drag your file(s) here

2xl

Drag your file(s) here

3xl

Drag your file(s) here

4xl

Drag your file(s) here

5xl

Drag your file(s) here

6xl

Drag your file(s) here

7xl

Drag your file(s) here

8xl

Drag your file(s) here

9xl

Drag your file(s) here

    <.file_upload name="document" class="file-upload w-full">
  <:label>default (md)</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-none">
  <:label>none</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-full">
  <:label>full</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-9xs">
  <:label>9xs</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-8xs">
  <:label>8xs</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-7xs">
  <:label>7xs</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-6xs">
  <:label>6xs</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-5xs">
  <:label>5xs</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-4xs">
  <:label>4xs</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-3xs">
  <:label>3xs</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-2xs">
  <:label>2xs</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-xs">
  <:label>xs</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-sm">
  <:label>sm</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-md">
  <:label>md</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-lg">
  <:label>lg</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-xl">
  <:label>xl</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-2xl">
  <:label>2xl</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-3xl">
  <:label>3xl</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-4xl">
  <:label>4xl</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-5xl">
  <:label>5xl</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-6xl">
  <:label>6xl</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-7xl">
  <:label>7xl</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-8xl">
  <:label>8xl</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>

<.file_upload name="document" class="file-upload w-full max-w-9xl">
  <:label>9xl</:label>
  <:close>
    <.heroicon name="hero-x-mark" />
  </:close>

</.file_upload>