Nri.Ui.RadioButton.V4

Patch changes:

replace height use with minHeight to prevent vertical text overflow issues
use break-word to prevent horizontal text overflow issues
update color styling
update unselected enabled label color
when disabled, replaces the disabled attribute with aria-disabled="true" and removes onClick event handler. These changes prevent the element from being selected but keep it in the tab order and ensure that tooltips can still be displayed when the element is focused.
add rightIcon property

Changes from V3:

use PremiumDisplay instead of PremiumLevel
rename showPennant to onLockedClick since its display depends on premium now
make onLockedClick be triggers when clicking anywhere and not just pennant to match PremiumChecbox

view :

{ label : String

, name : String

, value : value

, valueToString : value -> String

, selectedValue : Maybe value

}

-> List (Attribute value msg)

-> Html msg

View a single radio button.

Content

premium : 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 (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 Style -> Attribute value msg

Adds CSS to the element containing the input.

labelCss : List 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 (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 : 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 (Html msg) -> Attribute value msg

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

rightIcon : Svg -> Attribute value msg

Adds an icon to the right of the label

NoRedInk/noredink-ui/29.2.0