Socket
Socket
Sign inDemoInstall

@commercetools-uikit/radio-input

Package Overview
Dependencies
14
Maintainers
3
Versions
844
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@commercetools-uikit/radio-input

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


Version published
Weekly downloads
5.8K
decreased by-1.25%
Maintainers
3
Created
Weekly downloads
 

Readme

Source

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

PropsTypeRequiredValuesDefaultDescription
idstring---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
namestring---Used as HTML name property for each RadioInput.Option
valuestring✅--Value of the selected radio RadioInput.Option
onChangefunc---Called with the new value. Required when input is not read only. Parent should pass it back as value
onBlurfunc---Called when an RadioInput.Option is blurred
onFocusfunc---Called when an RadioInput.Option is focused
isDisabledbool--falseIndicates that all RadioInput.Options cannot be used (e.g not authorised, or changes not saved)
isReadOnlybool--falseIndicates that all RadioInput.Options are displaying read-only content
hasErrorbool---Indicates the radio RadioInput.Option has an error
hasWarningbool---Indicates the radio RadioInput.Option has a warning
horizontalConstraintstring-m | l | xl | scalescaleHorizontal size limit of the radio RadioInput.Group (only available in stack direction)
directionstring-stack | inlinestackRendering direction of the radio RadioInput.Options
directionPropsobject--{ scale: "m" }Passes props of the Spacings.Stack or Spacings.Inline, dependeing on the chosen direction
childrennode✅--At least one RadioInput.Option component or another node (mixed children are allowed)
valuestring | boolean---The selected value of one of the RadioInput.Options

RadioInput.Option

PropsTypeRequiredValuesDefaultDescription
valuestring | boolean✅--The value identifying this RadioInput.Option
childrennode✅--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.
isDisabledbool--falseRadio 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.
isHoveredbool--falseForces 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.wrapperfunction---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.
additionalContentnode---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

Keywords

FAQs

Package last updated on 08 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc