https://github.com/metonym/svelte-radio

Declarative Radio button group component for Svelte
https://github.com/metonym/svelte-radio

radio radio-button radio-group svelte svelte-component typescript

Last synced: 2 months ago
JSON representation

Declarative Radio button group component for Svelte

• Host: GitHub
• URL: https://github.com/metonym/svelte-radio
• Owner: metonym
• License: mit
• Created: 2020-04-13T14:29:40.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-09-27T07:21:33.000Z (3 months ago)
• Last Synced: 2024-10-20T13:09:53.511Z (2 months ago)
• Topics: radio, radio-button, radio-group, svelte, svelte-component, typescript
• Language: Svelte
• Homepage: https://metonym.github.io/svelte-radio/
• Size: 1.34 MB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-radio

[![NPM][npm]][npm-url]

> Declarative Radio button group component for Svelte.

Try it in the [Svelte REPL](https://svelte.dev/repl/f2b10d0faf2e44fd85a72b06a63ae8c2).

---

## Installation

**Yarn**

```bash

yarn add -D svelte-radio

```

**NPM**

```bash

npm i -D svelte-radio

```

**pnpm**

```bash

pnpm i -D svelte-radio

```

## Usage

By default, this component is _unstyled_.

### Basic

```svelte

  import { RadioGroup, Radio } from "svelte-radio";

  let value = "1";

  

  

  

value: {value}




 (value = "2")}>Set value to "2"

```

### Custom legend

Customize the radio group legend by using the "legend" slot:

```svelte

  

    Radio group legend

  

  

  

  

```

### Styling

This component is unstyled by design. Use a global class selector to style the `.svelte-radio-group` and `.svelte-radio` classes.

```css

:global(.svelte-radio-group) {

  border: 2px solid #e0e0e0;

  padding: 1rem;

}

:global(.svelte-radio) {

  margin-bottom: 0.5rem;

}

:global(.svelte-radio label) {

  margin-left: 0.25rem;

}

```

## API

### `RadioGroup` props

| Name   | Type                 | Default value          |

| :----- | :------------------- | :--------------------- |

| legend | `string`             | `"Radio group legend"` |

| value  | `string` or `number` | `undefined`            |

`$$restProps` are forwarded to the top-level `fieldset` element.

### `Radio` props

| Name    | Type                 | Default value                           |

| :------ | :------------------- | :-------------------------------------- |

| id      | `string`             | `"radio-" + Math.random().toString(36)` |

| label   | `string`             | `"Radio button label"`                  |

| value   | `string` or `number` | `""`                                    |

| checked | `boolean`            | `false`                                 |

`$$restProps` are forwarded to the second-level `input` element.

## Dispatched events

### `RadioGroup`

- **on:change**: dispatched when the selection changes

```svelte

  let events = [];

 (events = [...events, e.detail])}

>

  

  

  

{#each events as event}

  
{JSON.stringify(event, null, 2)}

{/each}

```


## TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

## Changelog

[Changelog](CHANGELOG.md)

## License

[MIT](LICENSE)

[npm]: https://img.shields.io/npm/v/svelte-radio.svg?color=%23ff3e00&style=for-the-badge

[npm-url]: https://npmjs.com/package/svelte-radio