NoRedInk / noredink-ui / Nri.Ui.Checkbox.V7

Patch changes:

Changes from V6:

Patch changes:

view : { label : String, selected : IsSelected } -> List (Attribute msg) -> Html.Styled.Html msg

View a checkbox (the label is only used for accessibility hints unless visibleLabel attribute is applied)

Event handlers

onCheck : (Basics.Bool -> msg) -> Attribute msg

Fire a message when toggling the checkbox.

Attributes


type Attribute msg

Customizations for the Checkbox.


type IsSelected
    = Selected
    | NotSelected
    | PartiallySelected
= Selected --  Checked (rendered with a checkmark)
| NotSelected -- Not Checked (rendered blank)
| PartiallySelected -- Indeterminate (rendered dash)

hiddenLabel : Attribute msg

Hides the visible label. (There will still be an invisible label for screen readers.)

visibleLabel : Attribute msg

Shows the visible label. This is the default behavior

selectedFromBool : Basics.Bool -> IsSelected

If your selectedness is always selected or not selected, you will likely store that state as a Bool in your model. selectedFromBool lets you easily convert that into an IsSelected value for use with Nri.Ui.Checkbox.

containerCss : List Css.Style -> Attribute msg

Adds CSS to the element containing the input.

labelCss : List Css.Style -> Attribute msg

Adds CSS to the element containing the label text.

Note that these styles don't apply to the literal HTML label element, since it contains the icon SVG as well.

custom : List (Html.Styled.Attribute msg) -> Attribute msg

Use this helper to add custom attributes.

Do NOT use this helper to add css styles, as they may not be applied the way you want/expect if underlying styles change. Instead, please use the css helper.

nriDescription : String -> Attribute msg

id : String -> Attribute msg

Set a custom ID for this checkbox input and label. If you don't set this, we'll automatically generate one from the label you pass in, but this can cause problems if you have more than one checkbox input with the same label on the page. You might also use this helper if you're manually managing focus.

testId : String -> Attribute msg

disabled : Attribute msg

This disables the input

enabled : Attribute msg

This enables the input, this is the default behavior

guidance : String -> Attribute msg

A guidance message shows below the input, unless an error message is showing instead.

guidanceHtml : List (Html.Styled.Html msg) -> Attribute msg

A guidance message (HTML) shows below the input, unless an error message is showing instead.

noMargin : Basics.Bool -> Attribute value

Remove default spacing from the top and bottom of the checkbox.

Internal

viewIcon : List Css.Style -> Nri.Ui.Svg.V1.Svg -> Html.Styled.Html msg