controls
File upload
A native file picker for documents and photos, with its button dressed by the skin.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
A native <input type="file"> inside a field. accept limits the file types.
A photo or a PDF, up to 10 MB.
<div class="ca-field w-full max-w-sm">
<label class="ca-field__label" for="licence">Copy of your provisional licence</label>
<input class="ca-file-upload" id="licence" name="licence" type="file" accept="image/*,.pdf" aria-describedby="licence-hint" />
<p class="ca-field__hint" id="licence-hint">A photo or a PDF, up to 10 MB.</p>
</div>Examples
Several files
Add multiple to let people choose more than one file.
Choose several files at once.
<div class="ca-field w-full max-w-sm">
<label class="ca-field__label" for="receipts">Fuel receipts</label>
<input class="ca-file-upload" id="receipts" name="receipts" type="file" accept="image/*,.pdf" multiple aria-describedby="receipts-hint" />
<p class="ca-field__hint" id="receipts-hint">Choose several files at once.</p>
</div>Guidance and accessibility
When to use
- Use it to upload a document or a photo as part of a form.
- Say which files work and how large they may be in a hint, before people choose.
- Check type and size on the server too;
acceptonly filters the picker.
Accessibility
- It is the native control: the keyboard, screen readers and phone cameras work as people expect.
- Connect a visible
<label>withforandid, and the hint witharia-describedby. - The browser writes the button text and the chosen file name in the visitor’s language.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-file-upload | Component | A native <input type="file">; the skin dresses its button. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
A photo or a PDF, up to 10 MB.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
A photo or a PDF, up to 10 MB.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
A photo or a PDF, up to 10 MB.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
A photo or a PDF, up to 10 MB.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>