Radio Svelte Component

Radio Components
Radio Props
Radios List
Examples

Radio Components

There are following components included:

Radio

Radio Props

Name	Type	Default	Description
checked	boolean	false	Defines whether the radio input is checked or not
colors	object		Object with Tailwind CSS colors classes
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'	Component's HTML Element
disabled	boolean	false	Defines whether the radio input is disabled
name	string		Radio input name
readonly	boolean	false	Defines whether the radio input is readonly
touchRipple	boolean	true	Enables touch ripple effect in Material theme
value	any		Radio input value
onChange	function(e)		Event will be triggered when radio state changed

Radios List

Radios List is not a separate component, but just a particular case of using List and ListItem components.

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

Examples

Radio.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Radio,
    BlockTitle,
    Block,
    List,
    ListItem,
  } from 'konsta/svelte';

  let inlineValue = 'inline-1';
  let groupValue = 'Books';
  let mediaValue = 'Item 1';
</script>

<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={() => (inlineValue = '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={() => (inlineValue = '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">
      <Radio
        slot="media"
        component="div"
        value="Books"
        checked={groupValue === 'Books'}
        onChange={() => (groupValue = 'Books')}
      />
    </ListItem>
    <ListItem label title="Movies">
      <Radio
        slot="media"
        component="div"
        value="Movies"
        checked={groupValue === 'Movies'}
        onChange={() => (groupValue = 'Movies')}
      />
    </ListItem>
    <ListItem label title="Food">
      <Radio
        slot="media"
        component="div"
        value="Food"
        checked={groupValue === 'Food'}
        onChange={() => (groupValue = 'Food')}
      />
    </ListItem>
    <ListItem label title="Drinks">
      <Radio
        slot="media"
        component="div"
        value="Drinks"
        checked={groupValue === 'Drinks'}
        onChange={() => (groupValue = 'Drinks')}
      />
    </ListItem>
  </List>

  <List strongIos outlineIos>
    <ListItem label title="Books">
      <Radio
        slot="after"
        component="div"
        value="Books"
        checked={groupValue === 'Books'}
        onChange={() => (groupValue = 'Books')}
      />
    </ListItem>
    <ListItem label title="Movies">
      <Radio
        slot="after"
        component="div"
        value="Movies"
        checked={groupValue === 'Movies'}
        onChange={() => (groupValue = 'Movies')}
      />
    </ListItem>
    <ListItem label title="Food">
      <Radio
        slot="after"
        component="div"
        value="Food"
        checked={groupValue === 'Food'}
        onChange={() => (groupValue = 'Food')}
      />
    </ListItem>
    <ListItem label title="Drinks">
      <Radio
        slot="after"
        component="div"
        value="Drinks"
        checked={groupValue === 'Drinks'}
        onChange={() => (groupValue = 'Drinks')}
      />
    </ListItem>
  </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."
    >
      <Radio
        slot="media"
        component="div"
        checked={mediaValue === 'Item 1'}
        onChange={() => (mediaValue = 'Item 1')}
      />
    </ListItem>
    <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."
    >
      <Radio
        slot="media"
        component="div"
        checked={mediaValue === 'Item 2'}
        onChange={() => (mediaValue = 'Item 2')}
      />
    </ListItem>
  </List>
</Page>