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.Option
    value="pineapple"
    additionalContent='Lorem ipsum dolor sit amet, consetetur sadipscing elitr'
  >
    <Spacings.Inline alignItems="center">
      <div>🍍</div>
      Pineapple
    </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. | | additionalContent | node | - | - | - | Pass any react component or a string to describe what the additional content on RadioInput.Option should represent. This is useful when radio option has additional children that need to be rendered as contents on the RadioInput.Option. |

Invariants

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