IHP Form Help - Using Built in From Controls

General
1

Hey new to IHP here was hoping i could get some help with some basic form stuff I’m trying to do! Currently i have a Form for, in my case, called Concepts, there are 12 columns (one concept) and will eventually be created with a source each which will have all 12 of these, extended from those concepts they are all a custom type of ENUM because they all have the same 3 options per concept, what im trying to accomplish is put each concept in a

with a radioField to select one of the ENUMS. Currently i have it working so I’m calling allEnumTypes and passing that as the options for each radioField, however they are all vertical in each row, i was wondering how i could leverage the hsx syntax to be able to put each enum in a
in the same row (horizontally), is there a way to accomplish this or would i need to build a custom form?

2

I don’t think there’s an easy way to do this right now with the builtin form helpers.

There’s a non easy way you could try. In IHP you can override the HTML the radioField function generates. Check out this guide https://ihp.digitallyinduced.com/Guide/tailwindcss.html#switching-ihp-styling It’s for tailwind but you can just follow the approach and override the styledRadioFormField.

Some code example how that would look like:

customBootstrap :: CSSFramework
customBootstrap =
        def { styledRadioFormField }
    where
        -- Copy + paste from https://github.com/digitallyinduced/ihp/blob/master/IHP/View/CSSFramework.hs#L205
        -- Now you can adjust the form rendering
        styledRadioFormField :: CSSFramework -> FormField -> Blaze.Html -> Blaze.Html
        styledRadioFormField cssFramework@CSSFramework {styledInputClass, styledInputInvalidClass, styledFormFieldHelp} formField@FormField {fieldType, fieldName, placeholder, fieldLabel, fieldValue, fieldInputId, validatorResult, fieldClass, disabled, disableLabel, disableValidationResult, additionalAttributes, labelClass, required, autofocus } validationResult =
            [hsx|
                {label}
                <fieldset>
                    {forEach (options fieldType) (getRadio)}
                </fieldset>

                {validationResult}
                {helpText}
            |]
            where
                label = unless disableLabel [hsx|<label class={classes ["form-label", (labelClass, labelClass /= "")]} for={fieldInputId}>{fieldLabel}</label>|]
                inputInvalidClass = styledInputInvalidClass cssFramework formField
                helpText = styledFormFieldHelp cssFramework formField

                -- Get a single radio button.
                getRadio (optionLabel, optionValue) = [hsx|
                    <div class="form-check">
                        <input
                            class={classes ["form-check-input", (inputInvalidClass, isJust validatorResult), (fieldClass, not (null fieldClass))]}
                            type="radio"
                            id={optionId}
                            name={fieldName}
                            value={optionValue}
                            checked={optionValue == fieldValue}
                            disabled={disabled}
                            required={required}
                            autofocus={autofocus}
                            {...additionalAttributes}
                        />
                        {label}
                    </div>
                |]
                    where
                        optionId = fieldInputId <> "_" <> optionValue
                        label = unless disableLabel [hsx|<label class={classes ["form-check-label", (labelClass, labelClass /= "")]} for={optionId}>{optionLabel}</label>|]