@commercetools-uikit/radio-input

A RadioInput represents a group of options where only one option can be selected at a time.

Usage no npm install needed!

<script type="module">
  import commercetoolsUikitRadioInput from 'https://cdn.skypack.dev/@commercetools-uikit/radio-input';
</script>

README

RadioInput

Description

A RadioInput represents a group of options where only one option can be selected at a time. The exported component contains a RadioInput.Group and RadioInput.Option components, with the RadioInput.Group component being the wrapped around the list of RadioInput.Options.

Most of the props should be assigned to the RadioInput.Group component, which internally forwards them to each RadioInput.Option component. This is mostly to avoid passing a lot of props to each RadioInput.Option component.

Usage

import RadioInput from '@commercetools-uikit/radio-input';

<RadioInput.Group onChange={...} name="fruits" value="apples">
  <RadioInput.Option value="apple">
    <Spacings.Inline alignItems="center">
      <div>🍎</div>
      Apple
    </Spacings.Inline>
  </RadioInput.Option>
  <RadioInput.Option value="banana">
    <Spacings.Inline alignItems="center">
      <div>🍌</div>
      Banana
    </Spacings.Inline>
  </RadioInput.Option>
</RadioInput.Group>

Properties

RadioInput.Group

Props Type Required Values Default Description
id string - - - Used as HTML id property for the radion RadioInput.Group. Each RadioInput.Option will also get an id with an index number appended, to make it unique
name string - - - Used as HTML name property for each RadioInput.Option
value string ✅ - - Value of the selected radio RadioInput.Option
onChange func - - - Called with the new value. Required when input is not read only. Parent should pass it back as value
onBlur func - - - Called when an RadioInput.Option is blurred
onFocus func - - - Called when an RadioInput.Option is focused
isDisabled bool - - false Indicates that all RadioInput.Options cannot be used (e.g not authorised, or changes not saved)
isReadOnly bool - - false Indicates that all RadioInput.Options are displaying read-only content
hasError bool - - - Indicates the radio RadioInput.Option has an error
hasWarning bool - - - Indicates the radio RadioInput.Option has a warning
horizontalConstraint string - m | l | xl | scale scale Horizontal size limit of the radio RadioInput.Group (only available in stack direction)
direction string - stack | inline stack Rendering direction of the radio RadioInput.Options
directionProps object - - { scale: "m" } Passes props of the Spacings.Stack or Spacings.Inline, dependeing on the chosen direction
children node ✅ - - At least one RadioInput.Option component or another node (mixed children are allowed)
value string | boolean - - - The selected value of one of the RadioInput.Options

RadioInput.Option

Props Type Required Values Default Description
value string | boolean ✅ - - The value identifying this RadioInput.Option
children node ✅ - - Pass any react components to describe what the RadioInput.Option represents. NOTE that the children components are wrapped into a Text.Body, which applies a secondary tone in case the RadioInput is disabled. If you have a Text component within the children, make sure to apply the secondary tone to it in case of isDisabled state.
isDisabled bool - - false Radio RadioInput.Option automatically gets the isDisabled state passed to the RadioInput.Group component. Only in cases where you would need to force the disabled state of one of the RadioInput.Options, you can pass this prop which will take precedence over the one passed to the RadioInput.Group component.
isHovered bool - - false Forces RadioInput.Option to be rendered in a hovered state. That's needed for cases when hovered appearance should be triggered by the parent component and not the RadioInput.Option itself. An RadioInput.Option is capable of handling it's own hovering without the need to pass this prop.
components.wrapper function - - - Pass a function that receives one argument and returns a react element. The function will be called by passing the RadioInput.Option as an argument and the resulting react element will be rendered. This can be used to add a controlled ToolTip around individual RadioInput.Options.

Invariants

  1. The RadioInput.Group must have at least one RadioInput.Option element as children