Skip to content

Add input_class and control_class props to form components#2

Merged
fsecada01 merged 6 commits intomasterfrom
feat/form-granular-class-props
Apr 26, 2026
Merged

Add input_class and control_class props to form components#2
fsecada01 merged 6 commits intomasterfrom
feat/form-granular-class-props

Conversation

@fsecada01
Copy link
Copy Markdown
Owner

Closes #1

Summary

  • CfFormField, CfSelect, CfTextarea now accept input_class — appended to the main input element's class string alongside Bulma's own classes
  • CfCheckboxGroup accepts control_class — appended to the <div class="control"> wrapper
  • Both Jinja2/JinjaX and django-cotton template sets updated
  • All new props default to "" — no visual change when omitted

Usage

{# Rounded search input #}
<c-cf.form-field name="q" label="Search" value="" error=""
                 type="text" input_class="is-rounded" />

{# Fixed-height textarea #}
<c-cf.textarea name="bio" label="Bio" value="" error=""
               input_class="has-fixed-size" />

{# Flex-wrapped checkbox group #}
<c-cf.checkbox-group name="tags" label="Tags"
                     choices="..." selected="[]" error=""
                     control_class="is-flex is-flex-wrap-wrap gap-2" />

JinjaX equivalent uses the same prop names:

<CfFormField name="q" label="Search" value="" error="" input_class="is-rounded" />

Test Plan

  • Jinja2: 8 new tests — prop applied to correct element (FormField, Select, Textarea, CheckboxGroup), default renders without extra class for each
  • Cotton: 5 new tests — same coverage for Cotton template set
  • All 12 existing form unit tests updated to pass new input_class=""/control_class="" defaults (required by StrictUndefined in the Jinja2 test environment)
  • Full suite (114 tests, excluding E2E): all pass
  • ruff check and ruff format --check: clean

🤖 Generated with Claude Code

FormField, Select, Textarea now accept input_class (appended to the
main input element's class string). CheckboxGroup accepts control_class
(appended to the wrapping <div class="control">).

Both Jinja2 and Cotton template sets updated. Existing tests updated to
pass empty defaults; new tests verify prop applied to correct element and
default renders without extra class.

Closes #1
@fsecada01 fsecada01 merged commit f553f52 into master Apr 26, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add granular inner-element class props to form components

1 participant