Radio

一つの選択肢を選ぶことができる選択コンポーネント

RadioGroupと合わせて使用してください。

BASIC

value:

value1

value2

value3

import { Radio, RadioGroup } from '@charcoal-ui/react'
import { useState } from 'react'
import styled from 'styled-components'

export const ExampleRadio = () => {
  const [value, setValue] = useState<string>()
  return (
    <div>
      <p>value: {value}</p>
      <StyledRadioGroup
        name="radio"
        label="radio"
        onChange={setValue}
        value={value}
      >
        <Radio value="value1">value1</Radio>
        <Radio value="value2">value2</Radio>
        <Radio value="value3">value3</Radio>
      </StyledRadioGroup>
    </div>
  )
}

export const StyledRadioGroup = styled(RadioGroup)`
  display: flex;
  flex-direction: column;
  gap: 8px;
`

disabled

value1

value2

value3

invalid

value1

value2

value3

readonly

value1

value2

value3

Props (RadioGroup)

name	description	type	default	required
label	ラベル	string		YES
name	inputタグに渡されるname	string		YES
disabled	無効化	boolean	false	NO
invalid	不正な入力化	boolean	false	NO
readonly	読み取り専用化	boolean	false	NO
value	選択されている値	string		NO

Props (Radio)

name	description	type	default	required
value	選択肢の値	string		YES
disabled	無効化	boolean	false	NO