hygguile_components_input (Untitled Document)

1.15 (hygguile components input)

Procedures

1.15.1 Procedures

Procedure: checkbox KEY: #:label #:name #:id #:value #:checked #:required #:disabled #:help-text #:error #:input-css #:label-css #:container-css ¶

Create a labelled HTML checkbox input.

Native checkboxes work without JavaScript and are keyboard accessible.

label: The descriptive text shown next to the checkbox.
name: The form field name.
id: An optional explicit HTML identifier; defaults to name.
value: The value submitted when the box is checked.
checked: A boolean rendering the pre-checked state.
required: A boolean making the checkbox mandatory.
disabled: A boolean disabling the control.
help-text: Optional helper copy linked through aria-describedby.
error: Optional validation message rendered with role="alert".
input-css: List of symbols styling the checkbox control.
label-css: List of symbols styling the label text.
container-css: List of symbols styling the wrapping row.

(checkbox #:label "I accept the terms" #:name "terms" #:required #t)

Procedure: fieldset content KEY: #:legend #:fieldset-classes ¶

Create an HTML <fieldset> grouping related form controls.

content: The list of form controls or fragments contained by the group.
legend: An optional caption rendered as the fieldset legend.
fieldset-classes: List of symbols representing container CSS classes.

(fieldset (list (input #:label "City" #:name "city")) #:legend "Address")

Procedure: form content KEY: #:action #:method #:enctype #:target #:id #:name #:autocomplete #:novalidate #:aria-label #:submit #:form-classes ¶

Create a working HTML <form> around a group of controls.

This is the wrapper for the common case: a form that posts its fields to a server-rendered page. It works with JavaScript disabled, because the browser itself serialises the controls and navigates to action, and it opts into the browser’s native validation unless you pass #:novalidate #t and handle the messages yourself.

Pass #:submit to append a ready-made submit button, or place your own buttons in content when a form needs several actions.

content: The controls and fieldsets that make up the form.
action: The URL the browser navigates to on submission.
method: A symbol or string, 'post by default; use 'get for searches.
enctype: An optional encoding symbol such as 'multipart/form-data, required for file uploads.
target: An optional browsing context string, e.g. "_blank".
id: An optional HTML identifier.
name: An optional form name string.
autocomplete: An optional string ("on" or "off") for the whole form.
novalidate: A boolean switching off native validation, for forms validated by hand.
aria-label: An optional accessible name when no visible heading describes the form.
submit: An optional label for a submit button appended after the fields.
form-classes: List of symbols representing the form layout CSS classes.

(form (list (fieldset (list (input #:label "Email" #:name "email"
                                   #:type 'email #:required #t
                                   #:autocomplete "email"))
                   #:legend "Newsletter"))
      #:action "/subscribe"
      #:submit "Subscribe")

Procedure: form-error content KEY: #:classes ¶

Create an accessible inline form validation message.

The message is announced by assistive technology through role="alert".

content: The error message string or inline nodes.
classes: List of symbols representing typography CSS classes.

(form-error "Please provide a valid email address.")

Procedure: help-text content KEY: #:classes ¶

Create a small helper paragraph providing extra field guidance.

content: The helper copy string or inline nodes.
classes: List of symbols representing typography CSS classes.

(help-text "We will never share your email.")

Procedure: input KEY: #:label #:name #:id #:value #:placeholder #:type #:required #:autocomplete #:autocapitalize #:spellcheck #:input-mode #:disabled #:readonly #:autofocus #:pattern #:min #:max #:step #:list #:help-text #:error #:input-css #:label-css #:input-flex-css ¶

Construct an HTML <input> component with a matching label.

The generated field always carries an id, and the label is bound to it through the for attribute, so clicking the label focuses the input. Pass #:autocomplete to help browsers and password managers fill the field with the right data (e.g. "name", "email", "street-address", "current-password", "one-time-code").

label: The descriptive text string displaying the identity of the field.
name: The name mapping configuration string bound onto form serialization attributes.
id: An optional explicit HTML identifier; defaults to name.
value: The standard default textual configuration payload string.
placeholder: The ambient string text descriptive hint applied when the field boundary is unpopulated.
type: A configuration symbol managing browser input rendering choices (e.g., 'text, 'password).
required: A boolean property indicating if form verification forces evaluation validation.
autocomplete: An optional string forwarding the HTML autocomplete hint to the browser.
autocapitalize: An optional string forwarding the HTML autocapitalize behaviour (e.g. "none", "words").
spellcheck: An optional string ("true" or "false") controlling native spell checking.
input-mode: An optional string suggesting a virtual keyboard layout (e.g. "email", "numeric").
disabled: A boolean that disables the control.
readonly: A boolean that makes the control read-only.
autofocus: A boolean that focuses the control on page load.
pattern: An optional regular expression string enforcing the value format.
min: An optional lower bound for numeric or date inputs.
max: An optional upper bound for numeric or date inputs.
step: An optional numeric increment for numeric inputs.
list: An optional datalist identifier offering autocomplete suggestions.
help-text: Optional helper copy rendered below the field and linked with aria-describedby.
error: Optional validation message rendered below the field with role="alert".
input-css: List of symbols representing layout utility CSS classes for the input field.
label-css: List of symbols representing presentation utility CSS classes for the label field.
input-flex-css: List of symbols regulating structure container box margins and gaps.

(input #:label "Email Address" #:name "email" #:type 'email #:autocomplete "email" #:required #t)

Procedure: legend content KEY: #:classes ¶

Create an HTML <legend> caption for a fieldset.

content: The legend caption string or inline nodes.
classes: List of symbols representing typography CSS classes.

(legend "Shipping address")

Procedure: radio KEY: #:label #:name #:id #:value #:checked #:required #:disabled #:input-css #:label-css #:container-css ¶

Create a labelled HTML radio button.

Give several radios the same name to form a mutually exclusive group. Radios are native controls, so they keep working with JavaScript disabled.

label: The descriptive text shown next to the radio.
name: The shared form field name identifying the group.
id: An optional explicit HTML identifier; defaults to a value derived from value.
value: The value submitted when this radio is selected.
checked: A boolean rendering the pre-selected state.
required: A boolean making the group mandatory.
disabled: A boolean disabling the control.
input-css: List of symbols styling the radio control.
label-css: List of symbols styling the label text.
container-css: List of symbols styling the wrapping row.

(radio #:label "Small" #:name "size" #:value "s" #:checked #t)

Procedure: range KEY: #:label #:name #:id #:value #:min #:max #:step #:disabled #:input-css ¶

Create a labelled HTML range slider.

label: The descriptive text shown above the slider.
name: The form field name.
id: An optional explicit HTML identifier; defaults to name.
value: The optional initial slider position.
min: The lowest accepted value. Defaults to 0.
max: The highest accepted value. Defaults to 100.
step: The increment between accepted values. Defaults to 1.
disabled: A boolean disabling the control.
input-css: List of symbols styling the range control.

(range #:label "Volume" #:name "volume" #:min 0 #:max 11 #:value 7)

Procedure: switch KEY: #:label #:name #:id #:value #:checked #:disabled ¶

Create a styled on/off switch backed by a native checkbox.

The switch is pure CSS and a real checkbox underneath, so it works without JavaScript. The visual track is styled by .hg-switch.

label: The descriptive text shown next to the switch.
name: The form field name.
id: An optional explicit HTML identifier; defaults to name.
value: The value submitted when the switch is on.
checked: A boolean rendering the switch in the on position.
disabled: A boolean disabling the control.

(switch #:label "Enable notifications" #:name "notifications" #:checked #t)

Procedure: textarea KEY: #:label #:name #:id #:value #:placeholder #:rows #:cols #:required #:autocomplete #:maxlength #:spellcheck #:disabled #:readonly #:autofocus #:help-text #:error #:textarea-css #:label-css #:textarea-flex-css ¶

Construct an HTML <textarea> multiline field block.

label: The explicit header string informing users of required field contexts.
name: The unique string structural identifier mapping the entity across standard DOM tables.
id: An optional explicit HTML identifier; defaults to name.
value: The initial text block paragraph payload string nested inside the block.
placeholder: An optional hint string shown while the field is empty.
rows: An optional suggested visible number of text rows.
cols: An optional suggested visible width in average character widths.
required: A field completion mandatory requirement boolean validation gate switch.
autocomplete: An optional string forwarding the HTML autocomplete hint to the browser.
maxlength: An optional maximum accepted character count.
spellcheck: An optional string ("true" or "false") controlling native spell checking.
disabled: A boolean that disables the control.
readonly: A boolean that makes the control read-only.
autofocus: A boolean that focuses the control on page load.
help-text: Optional helper copy rendered below the field and linked with aria-describedby.
error: Optional validation message rendered below the field with role="alert".
textarea-css: List of symbols targeting specific dimensions and borders configuration styles.
label-css: List of symbols handling sizing constraints applied onto the matching label tags.
textarea-flex-css: List of symbols managing outer wrapper responsive card flex constraints.

(textarea #:label "User Bio" #:name "biography" #:value "Born in Scheme...")