Pure UI component functions for HTML generation using Hiccup.
These are reusable, generic components that can be used across all domain modules. No domain-specific logic should be placed here - only pure presentation functions.
Pure UI component functions for HTML generation using Hiccup. These are reusable, generic components that can be used across all domain modules. No domain-specific logic should be placed here - only pure presentation functions.
(badge text & [opts])Canonical badge component.
opts:
Canonical badge component. opts: - :variant one of :success :info :warning :danger :neutral :outline - :class extra class names - :icon optional hiccup icon shown before text
(button text & [opts])Generic button component.
Args: text: Button text opts: Optional map with :type, :class, :disabled, :onclick, etc.
Returns: Hiccup button element
Generic button component. Args: text: Button text opts: Optional map with :type, :class, :disabled, :onclick, etc. Returns: Hiccup button element
(checkbox field-key checked? & [opts])Checkbox component with hidden field for unchecked state.
Args: field-key: Keyword for checkbox name/id checked?: Boolean indicating if checkbox is checked opts: Optional map with additional attributes like :value, :required, :class
Returns: Hiccup checkbox input elements (hidden + checkbox) as a list
Checkbox component with hidden field for unchecked state. Args: field-key: Keyword for checkbox name/id checked?: Boolean indicating if checkbox is checked opts: Optional map with additional attributes like :value, :required, :class Returns: Hiccup checkbox input elements (hidden + checkbox) as a list
(data-table headers rows & [opts])Generic data table component.
Args: headers: Vector of header strings rows: Vector of row vectors (each row is vector of cell values) opts: Optional map with :id, :class, HTMX attributes, etc.
Returns: Hiccup table structure
Generic data table component. Args: headers: Vector of header strings rows: Vector of row vectors (each row is vector of cell values) opts: Optional map with :id, :class, HTMX attributes, etc. Returns: Hiccup table structure
(email-input field-key value & [opts])Email input component.
Args: field-key: Keyword for input name/id value: Current input value opts: Optional map with additional attributes
Returns: Hiccup email input element
Email input component. Args: field-key: Keyword for input name/id value: Current input value opts: Optional map with additional attributes Returns: Hiccup email input element
(error-message message & [opts])Error message component.
Args: message: Error message text opts: Optional map with additional attributes
Returns: Hiccup error message structure
Error message component. Args: message: Error message text opts: Optional map with additional attributes Returns: Hiccup error message structure
(form-field field-key label input-html errors)Form field wrapper with label and error display.
Args: field-key: Keyword for field identification label: String label for the field input-html: Hiccup structure for the input element errors: Optional collection of error messages
Returns: Hiccup form field structure
Form field wrapper with label and error display. Args: field-key: Keyword for field identification label: String label for the field input-html: Hiccup structure for the input element errors: Optional collection of error messages Returns: Hiccup form field structure
(htmx-attrs opts)Helper to generate HTMX attributes map.
Args: opts: Map with HTMX options like :hx-get, :hx-post, :hx-target, etc.
Returns: Map of HTMX attributes
Helper to generate HTMX attributes map. Args: opts: Map with HTMX options like :hx-get, :hx-post, :hx-target, etc. Returns: Map of HTMX attributes
(info-message message & [opts])Info message component.
Args: message: Info message text opts: Optional map with additional attributes
Returns: Hiccup info message structure
Info message component. Args: message: Info message text opts: Optional map with additional attributes Returns: Hiccup info message structure
(link-button text href & [opts])Link styled as button component.
Args: text: Link text href: Link URL opts: Optional map with :class, :target, etc.
Returns: Hiccup link element styled as button
Link styled as button component. Args: text: Link text href: Link URL opts: Optional map with :class, :target, etc. Returns: Hiccup link element styled as button
(password-input field-key value & [opts])Password input component.
Args: field-key: Keyword for input name/id value: Current input value opts: Optional map with additional attributes
Returns: Hiccup password input element
Password input component. Args: field-key: Keyword for input name/id value: Current input value opts: Optional map with additional attributes Returns: Hiccup password input element
(render-html hiccup-data)Convert Hiccup data structure to HTML string.
Args: hiccup-data: Hiccup data structure
Returns: HTML string
Convert Hiccup data structure to HTML string. Args: hiccup-data: Hiccup data structure Returns: HTML string
(select-field field-key options selected-value & [opts])Select dropdown component.
Args: field-key: Keyword for select name/id options: Vector of [value label] pairs or map of value->label selected-value: Currently selected value opts: Optional map with additional attributes
Returns: Hiccup select element
Select dropdown component. Args: field-key: Keyword for select name/id options: Vector of [value label] pairs or map of value->label selected-value: Currently selected value opts: Optional map with additional attributes Returns: Hiccup select element
(submit-button text & [opts])Submit button component.
Args: text: Button text opts: Optional map with :class, :loading-text, :hx-indicator, etc.
Returns: Hiccup submit button element
Submit button component. Args: text: Button text opts: Optional map with :class, :loading-text, :hx-indicator, etc. Returns: Hiccup submit button element
(success-message message & [opts])Success message component.
Args: message: Success message text opts: Optional map with additional attributes
Returns: Hiccup success message structure
Success message component. Args: message: Success message text opts: Optional map with additional attributes Returns: Hiccup success message structure
(table-wrapper table-html & args)Wrap a table in the canonical responsive table container.
Accepted forms:
Wrap a table in the canonical responsive table container.
Accepted forms:
- (table-wrapper table-html)
- (table-wrapper table-html {:class ...})
- (table-wrapper table-html child1 child2 ...)
- (table-wrapper table-html {:class ...} child1 child2 ...)(text-input field-key value & [opts])Generic text input component.
Args: field-key: Keyword for input name/id value: Current input value opts: Optional map with :placeholder, :type, :required, :pattern, :class, etc.
Returns: Hiccup input element
Generic text input component. Args: field-key: Keyword for input name/id value: Current input value opts: Optional map with :placeholder, :type, :required, :pattern, :class, etc. Returns: Hiccup input element
(textarea field-key value & [opts])Textarea component.
Args: field-key: Keyword for textarea name/id value: Current textarea value opts: Optional map with :rows, :cols, :placeholder, etc.
Returns: Hiccup textarea element
Textarea component. Args: field-key: Keyword for textarea name/id value: Current textarea value opts: Optional map with :rows, :cols, :placeholder, etc. Returns: Hiccup textarea element
(validation-errors errors)Validation errors display component.
Args: errors: Map of field->errors or collection of error messages
Returns: Hiccup validation errors structure
Validation errors display component. Args: errors: Map of field->errors or collection of error messages Returns: Hiccup validation errors structure
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |