height
use with minHeight
to prevent vertical text overflow issuesbreak-word
to prevent horizontal text overflow issuesdisabled
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.rightIcon
propertyview : { 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.
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
onSelect : (value -> msg) -> Attribute value msg
Fire a message parameterized by the value type when selecting a radio option
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