File - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<div class="ts-file">
    <input type="file" />
</div>

States

Disabled

A file input can show it's currently disabled.

<div class="ts-file">
    <input type="file" disabled />
</div>

Variations

Solid

A file input can have a solid background.

<div class="ts-file is-solid">
    <input type="file" />
</div>

Underlined

A file input can have a solid background and an underline.

<div class="ts-file is-underlined">
    <input type="file" />
</div>

Negative

A file input can show it's in an invalid state.

<div class="ts-file is-negative">
    <input type="file" />
</div>

Sizes

A file input can have different sizes.

<div class="ts-file is-small">
    <input type="file" />
</div>
<div class="ts-file">
    <input type="file" />
</div>
<div class="ts-file is-large">
    <input type="file" />
</div>

Density

A file input can adjust its height for a tighter or more relaxed look.

<div class="ts-file is-dense">
    <input type="file" />
</div>
<div class="ts-file">
    <input type="file" />
</div>
<div class="ts-file is-relaxed">
    <input type="file" />
</div>