NoRedInk / noredink-ui / Nri.Ui.RadioButton.V4

Patch changes:

Changes from V3:

view : { label : String, name : String, value : value, valueToString : value -> String, selectedValue : Maybe value } -> List (Attribute value msg) -> Accessibility.Styled.Html msg

View a single radio button.

Content

premium : Nri.Ui.Data.PremiumDisplay.PremiumDisplay -> Attribute value msg

Lock Premium content if the user does not have Premium.

onLockedClick : msg -> Attribute value msg

Makes the Premium pennant clickable.

When the pennant is clicked, the msg that's passed in will fire.

disclosure : List (Accessibility.Styled.Html msg) -> Attribute value msg

Content that shows when this RadioButton is selected

Event handlers

onSelect : (value -> msg) -> Attribute value msg

Fire a message parameterized by the value type when selecting a radio option

Attributes


type Attribute value msg

Customizations for the RadioButton.

hiddenLabel : Attribute value msg

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

visibleLabel : Attribute value msg

Shows the visible label. This is the default behavior

containerCss : List Css.Style -> Attribute value msg

Adds CSS to the element containing the input.

labelCss : List Css.Style -> Attribute value 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 value 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 value msg

id : String -> Attribute value msg

Set a custom ID for this radio 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 radio input with the same label on the page. You might also use this helper if you're manually managing focus.

testId : String -> Attribute value msg

disabled : Attribute value msg

This disables the input

enabled : Attribute value msg

This enables the input, this is the default behavior

errorIf : Basics.Bool -> Attribute value msg

Sets whether or not the field will be highlighted as having a validation error.

errorMessage : Maybe String -> Attribute value msg

If Just, the field will be highlighted as having a validation error, and the given error message will be shown.

guidance : String -> Attribute value msg

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

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

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

rightIcon : Nri.Ui.Svg.V1.Svg -> Attribute value msg

Adds an icon to the right of the label