NoRedInk / noredink-ui / Nri.Ui.RadioButtonDotless.V1

Looks like a standard button, behaves like a radio button

Patch changes:

- Introduce `enabled`/`disabled` attributes and styles
- Support markdown for radio button contents (like Button does)

Create a radio button

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

View the single dotless radio button

label supports bold and italic markdown syntax


type Attribute value msg

Customizations for the RadioButton.

Behavior

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

Fire a message upon selection of this radio button option

Customization

unboundedWidth : Attribute value msg

Leave the width unbounded (this is the default)

fillContainerWidth : Attribute value msg

The button will attempt to fill the width of its container

textAlignCenter : Attribute value msg

Align the text to the center in the button

textAlignLeft : Attribute value msg

Align the text to the left in the button

small : Attribute value msg

A small sized button (~36px tall)

medium : Attribute value msg

A medium sized button (~45px tall - this is the default)

large : Attribute value msg

A large sized button (~56px tall)

enabled : Attribute value msg

Enable the input (this is the default)

disabled : msg -> Attribute value msg

Disable the input

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.

Attributes

id : String -> Attribute value msg

Set a unique identifier for the button. This id will also be used as the root name for sub elements.

custom : List (Html.Styled.Attribute Basics.Never) -> 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 containerCss or labelCss helper.

nriDescription : String -> Attribute value msg

Set the "data-nri-description" attribute

testId : String -> Attribute value msg

See Cypress best practices: https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements