19.2.0 • Published 3 days ago

@commercetools-uikit/radio-input v19.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 days ago

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
19.2.0

7 days ago

19.1.0

18 days ago

19.0.0

1 month ago

18.5.0

2 months ago

18.4.0

2 months ago

18.3.0

2 months ago

18.2.0

2 months ago

18.1.0

3 months ago

18.0.0

3 months ago

17.1.0

3 months ago

17.0.1

3 months ago

17.0.0

4 months ago

16.12.1

5 months ago

16.12.0

5 months ago

16.5.0

10 months ago

16.6.1

9 months ago

16.6.0

9 months ago

16.4.1

10 months ago

16.9.0

6 months ago

16.7.3

8 months ago

16.7.2

8 months ago

16.7.1

8 months ago

16.7.0

9 months ago

16.7.5

8 months ago

16.7.4

8 months ago

16.8.0

6 months ago

16.11.0

6 months ago

16.10.0

6 months ago

16.4.0

10 months ago

16.3.0

11 months ago

16.2.1

11 months ago

16.2.0

11 months ago

16.1.1

12 months ago

16.1.0

12 months ago

15.15.0

1 year ago

15.15.1

1 year ago

16.0.0

1 year ago

15.13.2

1 year ago

15.14.3

1 year ago

15.14.1

1 year ago

15.14.2

1 year ago

15.14.0

1 year ago

15.13.1

1 year ago

15.13.0

1 year ago

15.12.0

1 year ago

15.9.0

1 year ago

15.10.0

1 year ago

15.11.2

1 year ago

15.11.0

1 year ago

15.11.1

1 year ago

15.7.0

1 year ago

15.8.0

1 year ago

15.5.0

1 year ago

15.5.1

1 year ago

15.6.0

1 year ago

15.4.0

1 year ago

15.3.0

2 years ago

15.2.4

2 years ago

15.2.1

2 years ago

15.2.2

2 years ago

15.2.3

2 years ago

15.1.1

2 years ago

15.1.2

2 years ago

15.1.0

2 years ago

15.2.0

2 years ago

15.0.0

2 years ago

14.0.2

2 years ago

14.0.6

2 years ago

13.0.4

2 years ago

14.0.0

2 years ago

14.0.1

2 years ago

13.0.2

2 years ago

13.0.0

2 years ago

13.0.1

2 years ago

12.2.9

2 years ago

12.2.5

2 years ago

12.2.6

2 years ago

12.2.7

2 years ago

12.2.4

3 years ago

12.2.3

3 years ago

12.2.2

3 years ago

12.2.1

3 years ago

12.2.0

3 years ago

12.1.0

3 years ago

12.0.12

3 years ago

12.0.8

3 years ago

12.0.7

3 years ago

12.0.3

3 years ago

12.0.4

3 years ago

12.0.6

3 years ago

12.0.0

3 years ago

11.2.1

3 years ago

11.2.0

3 years ago

11.0.2

3 years ago

11.0.1

3 years ago

10.47.4

3 years ago

10.47.3

3 years ago

10.47.0

3 years ago

10.46.3

3 years ago

10.46.2

3 years ago

10.46.1

3 years ago

10.45.0

3 years ago

10.44.4

3 years ago

10.44.1

3 years ago

10.44.0

3 years ago

10.43.3

3 years ago

10.43.2

3 years ago

10.42.3

3 years ago

10.42.2

3 years ago

10.42.0

3 years ago

10.42.1

3 years ago

10.41.0

3 years ago

10.40.1

3 years ago

10.40.0

3 years ago

10.39.8

3 years ago

10.39.7

3 years ago

10.39.6

3 years ago

10.39.4

4 years ago

10.39.2

4 years ago

10.39.3

4 years ago

10.39.1

4 years ago

10.34.0

4 years ago

10.30.1

4 years ago

10.27.1

4 years ago

10.24.0

4 years ago

10.21.0

4 years ago

10.18.7-canary.5

4 years ago

10.18.7-canary.6

4 years ago

10.18.7-canary.7

4 years ago

10.18.7-canary.4

4 years ago

10.18.7-canary.3

4 years ago

10.18.7-canary.2

4 years ago

10.18.7-canary.1

4 years ago

10.18.6-canary.1

4 years ago

10.18.7-canary.0

4 years ago

10.18.5-canary.4

4 years ago

10.18.6-canary.0

4 years ago

10.18.5-canary.3

4 years ago

10.18.5-canary.2

4 years ago

10.18.5-canary.1

4 years ago

10.18.5-canary.0

4 years ago

10.18.4

4 years ago

10.18.4-canary.9

4 years ago

10.18.4-canary.8

4 years ago

10.18.4-canary.7

4 years ago

10.18.4-canary.6

4 years ago

10.18.4-canary.3

4 years ago

10.18.4-canary.4

4 years ago

10.18.4-canary.5

4 years ago

10.18.4-canary.1

4 years ago

10.18.4-canary.2

4 years ago

10.18.4-canary.0

4 years ago

10.18.3-canary.2

4 years ago

10.18.3-canary.3

4 years ago

10.18.3-canary.1

4 years ago

10.18.3-canary.0

4 years ago

10.18.2-canary.3

4 years ago

10.18.2-canary.2

4 years ago

10.18.2-canary.1

4 years ago

10.17.1-canary.3

4 years ago

10.17.1-canary.2

4 years ago

10.18.1-canary.0

4 years ago

10.18.2-canary.0

4 years ago

10.17.1-canary.1

4 years ago

10.17.1-canary.0

4 years ago

10.17.0

4 years ago

10.16.1-canary.8

4 years ago

10.16.1-canary.7

4 years ago

10.16.1-canary.5

4 years ago

10.16.1-canary.6

4 years ago

10.16.1-canary.4

4 years ago

10.16.1-canary.3

4 years ago

10.16.1-canary.2

4 years ago

10.16.1-canary.1

4 years ago

10.16.1-canary.0

4 years ago

10.16.0

4 years ago

10.15.2-canary.4

4 years ago

10.15.2-canary.3

4 years ago

10.15.2-canary.2

4 years ago

10.15.2-canary.0

4 years ago

10.15.1-canary.6

4 years ago

10.15.1

4 years ago

10.15.1-canary.4

4 years ago

10.15.0

4 years ago

10.14.3-canary.4

4 years ago

10.14.1

4 years ago

10.14.1-canary.7

4 years ago

10.13.0

4 years ago

11.0.0-alpha.11

4 years ago

11.0.0-alpha.10

4 years ago

11.0.0-alpha.9

4 years ago

11.0.0-alpha.6

4 years ago

11.0.0-alpha.7

4 years ago

11.0.0-alpha.8

4 years ago

11.0.0-alpha.5

4 years ago

11.0.0-alpha.4

4 years ago

11.0.0-alpha.3

4 years ago

11.0.0-alpha.2

4 years ago

11.0.0-alpha.1

4 years ago

11.0.0-alpha.0

4 years ago