Radio Input Component

[muratcorlu]

Design

Figma Design Document

Implementation

General usage example:

<bl-radio label="Payment Type" name="payment-type" value="cc">
    <bl-radio-option value="cc">Credit Card</bl-radio-option>
    <bl-radio-option value="ideal">iDeal</bl-radio-option>    
</bl-radio>

API Reference:

bl-radio component

This component is the wrapper component of the radio options. Field value will be set/red via this component.

Attributes

Attribute	Description	Default Value
label (string)	Label of the form field. This is needed for accessibility needs.	-
name (string)	Name of the form field	-
value (string)	Default value of the input	-
required (boolean)	Sets form field required	false

Events

Event	Description	Event Data
bl-change	Will be triggered once radio selection changed	new value as string

CSS Custom Properties

Property	Description	Default Value
--bl-radio-direction	Can be used for showing radio options as columns instead of rows. Options are row or column	row

bl-radio-option component

This component defines options for the radio input.

Attributes

Attribute	Description	Default Value
value (string)	Value of the option	-
disabled (boolean)	Sets option disabled	false

Slots

Name	Description	Default Content
default slot	Label of the option	-

Events

Event	Description	Event Data
bl-selected	Will be triggered once this option is selected	-
bl-unselected	Will be triggered once this option is unselected	-

[buseselvi]

We have completed the design of the radio input component. You can reach it from the link 🥳 https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=1510%3A6857

[leventozen]

I think we will use the label at bl-radio, not bl-radio-option. Therefore, no need to add slot at bl-radio-option 🤔

[muratcorlu]

@leventozen That label is for the option. <bl-radio-option>Credit Card</bl-radio-option> Label in this example is "Credit Card". Currently I don't define a label for whole input as it's not indicated in the design. I think it'll up to the user how and where to put a label for it.

[leventozen]

@muratcorlu I misdirected myself as thinking bl-radio is kind of a group and option is a kind of radio itself. Also, in public Figma under the usage part seems like we have a labeling option for our option "wrapper".

[muratcorlu]

@leventozen You understood correct. bl-radio is the wrapper and bl-radio-option is for the options. I couldn't see a use case to use bl-radio-option by itself, since it doesn't make sense to use a radio button without another option.

@buseselvi Are those "List Of Items" titles the label of the Radio Input field? If so I missed them. Maybe we can specifically mention them in a section. Is it optional, rules for letter-casing, location of it etc.

[buseselvi]

@muratcorlu I added label as an example, but we may not include it, it is not used this way everywhere.

[muratcorlu]

I'll add a label property for the wrapper for accessibility reasons anyway. So screen readers can read it to give information to the end user about what they are selecting in this field. Maybe we can also consider showing this label in some "suggested ways" as an optional feature.

[leventozen]

Seems done, good job! 👍

[github-actions[bot]]

:tada: This issue has been resolved in version 2.0.0-beta.43 :tada:

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 2.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: