ラジオ React コンポーネント

ラジオコンポーネント
ラジオのプロパティ
ラジオリスト
例

ラジオコンポーネント

以下のコンポーネントが含まれています

ラジオ

ラジオのプロパティ

名前	タイプ	デフォルト	説明
checked	boolean	false	ラジオ入力がチェックされているかどうかを定義します
colors	object		Tailwind CSS カラークラスを持つオブジェクト
colors.bgCheckedIos	string	'bg-primary'
colors.bgCheckedMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.borderCheckedIos	string	'border-primary'
colors.borderCheckedMaterial	string	'border-md-light-primary dark:border-md-dark-primary'
colors.borderIos	string	'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.borderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
component	string	'label'	コンポーネントのHTML要素
defaultChecked	boolean	false	非制御コンポーネントの場合、ラジオ入力がチェックされているかどうかを定義します
disabled	boolean	false	ラジオ入力が無効になっているかどうかを定義します
name	string		ラジオ入力名
readOnly	boolean	false	ラジオ入力が読み取り専用かどうかを定義します
touchRipple	boolean	true	マテリアルテーマでタッチリップルエフェクトを有効にします
value	any		ラジオ入力値
onChange	function(e)		ラジオの状態が変更されたときにイベントがトリガーされます

ラジオリスト

ラジオリストは独立したコンポーネントではなく、<List>と<ListItem>コンポーネントを使用する特定のケースです。

<List>
  {/* Additional "label" prop on ListItem */}
  <ListItem
    label
    title="Books"
    media={
      <>
        {/* Pass Radio to list item media */}
        <Radio component="div" name="my-checkbox" />
      </>
    }
  />
  <ListItem
    label
    title="Movies"
    media={
      <>
        {/* Pass Radio to list item media */}
        <Radio component="div" name="my-checkbox" />
      </>
    }
  />
</List>

例

Radio.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Radio,
  BlockTitle,
  Block,
  List,
  ListItem,
} from 'konsta/react';

export default function RadioPage() {
  const [inlineValue, setInlineValue] = useState('inline-1');
  const [groupValue, setGroupValue] = useState('Books');
  const [mediaValue, setMediaValue] = useState('Item 1');

  return (
    <Page>
      <Navbar
        title="Radio"
        />

      <BlockTitle>Inline</BlockTitle>
      <Block strongIos outlineIos>
        <p>
          Lorem{' '}
          <Radio
            name="demo-radio-inline"
            value="inline-1"
            checked={inlineValue === 'inline-1'}
            onChange={() => setInlineValue('inline-1')}
          />{' '}
          ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo
          nihil aut eius commodi sint eveniet aliquid eligendi{' '}
          <Radio
            name="demo-radio-inline"
            value="inline-2"
            checked={inlineValue === 'inline-2'}
            onChange={() => setInlineValue('inline-2')}
          />{' '}
          ad delectus impedit tempore nemo, enim vel praesentium consequatur
          nulla mollitia!
        </p>
      </Block>

      <BlockTitle>Radio Group</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          label
          title="Books"
          media={
            <Radio
              component="div"
              value="Books"
              checked={groupValue === 'Books'}
              onChange={() => setGroupValue('Books')}
            />
          }
        />
        <ListItem
          label
          title="Movies"
          media={
            <Radio
              component="div"
              value="Movies"
              checked={groupValue === 'Movies'}
              onChange={() => setGroupValue('Movies')}
            />
          }
        />
        <ListItem
          label
          title="Food"
          media={
            <Radio
              component="div"
              value="Food"
              checked={groupValue === 'Food'}
              onChange={() => setGroupValue('Food')}
            />
          }
        />
        <ListItem
          label
          title="Drinks"
          media={
            <Radio
              component="div"
              value="Drinks"
              checked={groupValue === 'Drinks'}
              onChange={() => setGroupValue('Drinks')}
            />
          }
        />
      </List>

      <List strongIos outlineIos>
        <ListItem
          label
          title="Books"
          after={
            <Radio
              component="div"
              value="Books"
              checked={groupValue === 'Books'}
              onChange={() => setGroupValue('Books')}
            />
          }
        />
        <ListItem
          label
          title="Movies"
          after={
            <Radio
              component="div"
              value="Movies"
              checked={groupValue === 'Movies'}
              onChange={() => setGroupValue('Movies')}
            />
          }
        />
        <ListItem
          label
          title="Food"
          after={
            <Radio
              component="div"
              value="Food"
              checked={groupValue === 'Food'}
              onChange={() => setGroupValue('Food')}
            />
          }
        />
        <ListItem
          label
          title="Drinks"
          after={
            <Radio
              component="div"
              value="Drinks"
              checked={groupValue === 'Drinks'}
              onChange={() => setGroupValue('Drinks')}
            />
          }
        />
      </List>

      <BlockTitle>With Media Lists</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          label
          title="Facebook"
          after="17:14"
          subtitle="New messages from John Doe"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          media={
            <Radio
              component="div"
              checked={mediaValue === 'Item 1'}
              onChange={() => setMediaValue('Item 1')}
            />
          }
        />
        <ListItem
          label
          title="John Doe (via Twitter)"
          after="17:11"
          subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          media={
            <Radio
              component="div"
              checked={mediaValue === 'Item 2'}
              onChange={() => setMediaValue('Item 2')}
            />
          }
        />
      </List>
    </Page>
  );
}