RadioCard

Props

Name	Type	Description
value*	string	The controlled value.
title*	string	Renders a title.
autoFocus	bool	Sets autoFocus.
bg	string
children	node	Shown when RadioCard is checked.
description	string	Additional description information display beneath the input.
disabled	bool	Sets disabled.
hint	node	A hint.
image	string	Path to an image to be rendered. Takes precedence over `hint` .
noControl	bool	Hides the control icon.

Examples

With control

Dark Mode

With description

Dark Mode

function Example() {
  const [choice, setChoice] = React.useState()
  const isValid = choice !== undefined

  return (
    <RadioGroup
      name="group-with-radio"
      value={choice}
      onChange={(e) => setChoice(e.target.value)}
      isValid={isValid}>
      <RadioCard
        value="value-description1"
        title="Lorem ipsum"
        description="A disabled radio card"
      />
      <RadioCard
        value="value-description2"
        title="Lorem ipsum"
        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore."
      />
    </RadioGroup>
  )
}

With children (can be any element)

Dark Mode

function Example() {
  const [choice, setChoice] = React.useState()
  const isValid = choice !== undefined

  return (
    <RadioGroup
      name="radio-card-select-input"
      value={choice}
      onChange={(e) => setChoice(e.target.value)}
      isValid={isValid}>
      <RadioCard value="radio-card-select-input1" title="Lorem ipsum" />
      <RadioCard value="radio-card-select-input2" title="Lorem ipsum">
        <SelectInput name="brand" label="Brand">
          <option value="" />
          <option value="mercedes">Mercedes</option>
          <option value="volvo">Volvo</option>
          <option value="audi">Audi</option>
          <option value="skoda">Skoda</option>
        </SelectInput>
      </RadioCard>
    </RadioGroup>
  )
}

Without control

Looking like SmallCard

Dark Mode

function Example() {
  const [choice, setChoice] = React.useState()
  const isValid = choice !== undefined

  return (
    <RadioGroup
      name="group-without-radio"
      value={choice}
      onChange={(e) => setChoice(e.target.value)}
      isValid={isValid}>
      <RadioCard
        value="value-no-control-and-hint"
        title="Lorem ipsum"
        noControl
      />
      <RadioCard value="value-no-control" title="Lorem ipsum" noControl />
    </RadioGroup>
  )
}

Without control - with description

Dark Mode

function Example() {
  const [choice, setChoice] = React.useState()
  const isValid = choice !== undefined

  return (
    <RadioGroup
      name="group-without-radio"
      value={choice}
      onChange={(e) => setChoice(e.target.value)}
      isValid={isValid}>
      <RadioCard
        value="value-no-control-and-hint-with-description1"
        description="Text becomes left aligned with description instead of centered"
        title="Lorem ipsum"
        noControl
      />
      <RadioCard
        value="value-no-control-with-description2"
        description="Text becomes left aligned with description instead of centered"
        title="Lorem ipsum"
        noControl
      />
    </RadioGroup>
  )
}

Without control and with image

Dark Mode

function Example() {
  const [choice, setChoice] = React.useState()
  const isValid = choice !== undefined

  return (
    <RadioGroup
      name="group-without-radio-with-image"
      value={choice}
      onChange={(e) => setChoice(e.target.value)}
      description={choice ? `Your choice is: ${choice}` : ''}
      errorMessage={!isValid && 'Please select something.'}
      isValid={isValid}>
      <RadioCard
        value="value-no-control-image-and-hint"
        image="/images/components/radioCard/santander.svg"
        title="Lorem ipsum"
        description="Radio card with an image and provided hint"
        noControl
      />
      <RadioCard
        value="value-no-control-image-only"
        image="/images/components/radioCard/black_car.png"
        title="Lorem ipsum"
        description="Radio card without hint and with image"
        noControl
      />
    </RadioGroup>
  )
}

Horizontal

Dark Mode

function Example() {
  const [choice, setChoice] = React.useState()
  const isValid = choice !== undefined

  return (
    <RadioGroup
      direction="row"
      name="group-with-only-title-horizontal"
      value={choice}
      onChange={(e) => setChoice(e.target.value)}
      isValid={isValid}>
      <RadioCard value="horizontal-title1" title="Lorem ipsum" noControl />
      <RadioCard value="horizontal-title2" title="Lorem ipsum" noControl />
      <RadioCard value="horizontal-title3" title="Lorem ipsum" noControl />
      <RadioCard value="horizontal-title4" title="Lorem ipsum" noControl />
    </RadioGroup>
  )
}

Horizontal - take up all the space

Dark Mode

function Example() {
  const [choice, setChoice] = React.useState()
  const isValid = choice !== undefined

  return (
    <RadioGroup
      name="group-with-only-title-horizontal"
      value={choice}
      onChange={(e) => setChoice(e.target.value)}
      isValid={isValid}>
      <Grid columns="repeat(4, 1fr)" gap={2}>
        <RadioCard
          value="horizontal-full-title1"
          title="Lorem ipsum"
          noControl
        />
        <RadioCard
          value="horizontal-full-title2"
          title="Lorem ipsum"
          noControl
        />
        <RadioCard
          value="horizontal-full-title3"
          title="Lorem ipsum"
          noControl
        />
        <RadioCard
          value="horizontal-full-title4"
          title="Lorem ipsum"
          noControl
        />
      </Grid>
    </RadioGroup>
  )
}