Styling

The Plain renderer puts an rf-* class on every element it draws and ships plain.css to style them. The stylesheet is driven by custom properties, so matching a design means setting variables, not rewriting rules.

Using the stylesheet

The package carries it under fable/assets/, so Fable copies it into fable_modules next to the package's sources, in a folder named after the package and its version:

@import "./fable_modules/Fable.Ripple.Form.Plain.1.0.0/assets/plain.css";

:root {
    --rf-color-accent: #0b7285;
    --rf-radius: 0;
}

Use the version you installed in the path. Set the variables after the import, on :root or on any ancestor of a form.

The variables

The classes

For your own stylesheet, or to override a rule:

Layout

Form.section "Title" wraps a sub-form in a fieldset with a legend; Form.group puts its fields side by side. Anything else is a Form.wrap: a function that receives the fields and places them in your own markup.

let card (title: string) (form: Form<'A>) : Form<'A> =
    form
    |> Form.wrap (fun context items ->
        Html.div
            [
                attr.className "card"
                Html.h3 title
                yield! context.RenderItems context items
            ]
    )

Another look for a field kind

Keep the field's attributes and change its markup: see Customize the view.