Radio

import { Radio, RadioGroup } from '@vtex/shoreline'

export default function Example() {
  return (
    <RadioGroup label="Radio group">
      <Radio value="1">Option 1</Radio>
      <Radio value="2">Option 2</Radio>
      <Radio value="3">Option 3</Radio>
    </RadioGroup>
  )
}

import { Radio, RadioGroup } from '@vtex/shoreline'

export default function Example() {
  return (
    <RadioGroup label="">
      <Radio value="opt1">Plain</Radio>
      <Radio value="opt2" checked>
        Checked
      </Radio>
      <Radio value="opt3" error>
        Error
      </Radio>
      <Radio value="opt4" disabled>
        Disabled
      </Radio>
      <Radio value="opt5" checked error disabled>
        All states
      </Radio>
    </RadioGroup>
  )
}

import { Divider, Radio, RadioGroup, Stack } from '@vtex/shoreline'

export default function Example() {
  return (
    <Stack>
      <RadioGroup label="Vertical radio group" errorText="Something is wrong">
        <Radio value="apple-value">Apples</Radio>
        <Radio value="pineapple-value">Pineapples</Radio>
        <Radio value="orange-value">Oranges</Radio>
        <Radio value="watermelon-value">Watermelons</Radio>
      </RadioGroup>

      <Divider />

      <RadioGroup
        label="Vertical radio group with error"
        errorText="Something is wrong"
        error
      >
        <Radio value="apple-value">Apples</Radio>
        <Radio value="pineapple-value">Pineapples</Radio>
        <Radio value="orange-value">Oranges</Radio>
        <Radio value="watermelon-value">Watermelons</Radio>
      </RadioGroup>

      <Divider />

      <RadioGroup
        label="Vertical radio group with description"
        errorText="Something is wrong"
        description="Please select your favorite fruit"
      >
        <Radio value="apple-value">Apples</Radio>
        <Radio value="pineapple-value">Pineapples</Radio>
        <Radio value="orange-value">Oranges</Radio>
        <Radio value="watermelon-value">Watermelons</Radio>
      </RadioGroup>

      <Divider />

      <RadioGroup label="Horizontal radio group" horizontal>
        <Radio value="apple-value">Apples</Radio>
        <Radio value="pineapple-value">Pineapples</Radio>
        <Radio value="orange-value">Oranges</Radio>
        <Radio value="watermelon-value">Watermelons</Radio>
      </RadioGroup>

      <Divider />

      <RadioGroup
        label="Horizontal radio group with error"
        horizontal
        errorText="Something is wrong"
        error
      >
        <Radio value="apple-value">Apples</Radio>
        <Radio value="pineapple-value">Pineapples</Radio>
        <Radio value="orange-value">Oranges</Radio>
        <Radio value="watermelon-value">Watermelons</Radio>
      </RadioGroup>

      <Divider />

      <RadioGroup
        label="Horizontal radio group with description"
        horizontal
        description="Please select your favorite fruit"
      >
        <Radio value="apple-value">Apples</Radio>
        <Radio value="pineapple-value">Pineapples</Radio>
        <Radio value="orange-value">Oranges</Radio>
        <Radio value="watermelon-value">Watermelons</Radio>
      </RadioGroup>
    </Stack>
  )
}

import { useEffect, useState } from 'react'
import { Radio, RadioGroup, useRadioState } from '@vtex/shoreline'

export default function Example() {
  const [value, setValue] = useState<string>()
  const state = useRadioState({
    value,
    setValue: setValue as any,
  })

  const [helpText, setHelpText] = useState('')

  useEffect(() => {
    if (value === 'opt4') {
      setHelpText('Pen pinapple apple pen!')
    } else {
      setHelpText('')
    }
  }, [value])

  return (
    <RadioGroup
      label="Vertical radio group"
      errorText="Something is wrong"
      state={state}
      description={helpText}
    >
      <Radio value="opt1">Pen</Radio>
      <Radio value="opt2">Pineapple</Radio>
      <Radio value="opt3">Apple</Radio>
      <Radio value="opt4">Another pen</Radio>
    </RadioGroup>
  )
}