Forms & Inputs Shortcodes

Interactive Carbon form controls including text inputs, number pickers, search fields, sliders, toggles, checkboxes, and date selectors.

Read Time: 2 min

The Hugo Carbon theme provides accessible form controls that map directly to the IBM Carbon Design System v11 input specifications, featuring focus rings, helper text, and invalid state indicators.

1. Text & Number Inputs (form-input, number-input)

Text Input (form-input)

ParameterTypeDefaultDescription
labelStringRequiredInput label text
placeholderStringOptionalPlaceholder prompt
helperStringOptionalHelper text rendered below the field
typeString"text"HTML input type (text, email, password, url)
Enter GitHub owner and repository slug
1

{{< form-input label="Repository Identifier" placeholder="caldeira-cc/hugo-theme-carbon" helper="Enter GitHub owner and repository slug" >}}{{< /form-input >}}

Number Input (number-input)

1

{{< number-input label="Concurrent Worker Threads" min="1" max="16" value="4" step="1" helper="Number of Web Workers allocated for CSV parsing" >}}

2. Search & Select Controls (search, select)

1

{{< search placeholder="Search documentation topics..." size="md" label="Documentation Search" >}}

Select Dropdown (select)

1

{{< select label="Deployment Target" helper="Select static hosting platform" options="Cloudflare Pages,GitHub Pages,Netlify,Self-Hosted Nginx" >}}

3. Sliders & Toggles (slider, toggle)

Slider Control (slider)

1

{{< slider label="Map Vector Detail Level" min="1" max="100" value="75" step="5" unit="%" >}}

Toggle Switch (toggle)

1

{{< toggle id="toggle-dark-mode" label="Dark Theme Mode" label_on="Enabled" label_off="Disabled" checked="true" >}}

4. Radios & Checkboxes (radio-group, checkbox)

Radio Group (radio-group, radio-button)

1
2
3
4

{{< radio-group legend="Default Content Language" name="lang-selection" helper="Choose language variant" >}}
  {{< radio-button name="lang-selection" value="en" label="British English (en-GB)" checked="true" >}}
  {{< radio-button name="lang-selection" value="pt" label="Português (pt-PT)" >}}
{{< /radio-group >}}

Checkbox (checkbox)

1
2

{{< checkbox id="chk-minify" label="Enable HTML, CSS, and JS minification" checked="true" >}}
{{< checkbox id="chk-audit" label="Run automated link integrity check before publish" checked="true" >}}

5. Date & Time Pickers (date-picker, time-picker)

ISO standard YYYY-MM-DD
UTC execution time
1
2
3

{{< date-picker label="Release Publication Date" placeholder="2026-09-09" helper="ISO standard YYYY-MM-DD" >}}

{{< time-picker label="Build Schedule Window" helper="UTC execution time" >}}

6. File Uploader (file-uploader)

1

{{< file-uploader label="Upload W3C CSV Dataset" helper="Select .csv file (Max size: 50MB)" accept=".csv,.json" >}}