|
1 | | -<Story story="Preview" /> |
2 | | -<ReactComponentDocs /> |
| 1 | +<Story story="Preview" defaultOpen /> |
3 | 2 |
|
4 | 3 | ## Usage |
5 | 4 |
|
6 | | -```tsx |
7 | | -import { Radio } from '@digdir/designsystemet-react'; |
| 5 | +Use the class `ds-input` on `<input>` together with `type="radio"`. |
8 | 6 |
|
9 | | -<Radio label="Radio" value="value" name="name" /> |
| 7 | +```html |
| 8 | +<input |
| 9 | + class="ds-input" |
| 10 | + type="radio" |
| 11 | +/> |
| 12 | +``` |
| 13 | + |
| 14 | +For a valid form element, we recommend using `<ds-field>` together with a `<label>`. |
| 15 | + |
| 16 | +```html |
| 17 | +<ds-field> |
| 18 | + <label class="ds-label">Radio</label> |
| 19 | + <input |
| 20 | + class="ds-input" |
| 21 | + type="radio" |
| 22 | + value="value" |
| 23 | + name="name" |
| 24 | + > |
| 25 | +</ds-field> |
10 | 26 | ``` |
| 27 | +## CSS variables and data attributes |
| 28 | +Sizes are controlled with [data-size](/en/fundamentals/code/sizes) and colors with [data-color](/en/fundamentals/code/colors). |
| 29 | +The component will inherit from the closest parent where these are set. |
| 30 | + |
| 31 | +Radio is `ds-input` with `type="radio"`, so variables and data attributes that apply to [input](/en/components/docs/input/overview) also apply to radio. |
| 32 | + |
| 33 | +<CssVariables /> |
| 34 | + |
| 35 | +<CssAttributes /> |
11 | 36 |
|
12 | 37 | ## Examples |
13 | 38 |
|
14 | 39 | ### Grouping |
15 | | -Use [`Fieldset`](/en/components/docs/fieldset/code) around a group of radio buttons to provide a common prompt (`<legend>`) and optionally a description (`description`). |
| 40 | + |
| 41 | +Use [fieldset](/en/components/docs/fieldset/code) for grouping multiple choices. |
16 | 42 |
|
17 | 43 | <Story story="GroupEn" /> |
18 | 44 |
|
19 | 45 | ### Outline |
20 | | -`variant="outline"` adds extra padding and a border around the selection, increasing the clickable area. |
21 | | - |
| 46 | +`data-variant="outline"` adds extra padding and a border around the option to create a larger clickable area. |
22 | 47 | <Story story="OutlineEn" /> |
23 | 48 |
|
24 | | -### With Error |
25 | | -Here we must use [`Fieldset`](/en/components/docs/fieldset/code), because it activates the correct style and ensures that the content has the correct connections for accessibility. |
| 49 | +### Inline |
| 50 | +Radio *can* be positioned horizontally with `flex`, but should generally be [placed vertically](/en/components/docs/radio/overview#placement). |
| 51 | +<Story story="InlineEn" /> |
26 | 52 |
|
27 | | -<Story story="WithErrorEn" /> |
| 53 | +### ReadOnly |
| 54 | +`type="radio"` is always `:read-only` and does not support this in the same way as input types you can type into. |
28 | 55 |
|
29 | | -### Readonly |
| 56 | +If you set `readonly` on radio, we ensure that it behaves as if it has read-only access by stopping `onClick` and `onChange`. |
30 | 57 |
|
31 | | -Fields with the `readonly` attribute are included in the tab order. Users can copy the content but not edit it. Information is included when the form is submitted. |
| 58 | +The user will still be able to focus on the element. |
32 | 59 |
|
33 | | -`Readonly` fields can be confusing for some users. Not everyone will understand why they cannot change the content of the field. We therefore recommend avoiding `readonly` as much as possible. |
| 60 | +<Story story="ReadOnly" /> |
34 | 61 |
|
35 | | -<Story story="ReadOnlyEn" /> |
36 | 62 |
|
37 | | -### Inline |
38 | | -Radio *can* be positioned horizontally with `flex`, but should generally be [placed vertically](/en/components/docs/radio/overview#placement). |
39 | | -<Story story="InlineEn" /> |
40 | 63 |
|
41 | | -## HTML |
42 | 64 |
|
43 | | -`Radio` is a composite component, so in HTML you have to build it from multiple components. |
44 | | -We use [`Fieldset`](/en/components/docs/fieldset/code), [`Label`](/en/components/docs/label/code) and [`Input`](/en/components/docs/input/code) to create a `Radio`. |
45 | 65 |
|
46 | | -The code below shows how you can visually build a `Radio` in HTML, but you have to make sure that `<input>` is connected with `<label>` and description. |
| 66 | +## React |
47 | 67 |
|
48 | | -```html |
49 | | -<div class="ds-field"> |
50 | | - <input |
51 | | - class="ds-input" |
52 | | - type="radio" |
53 | | - value="value" |
54 | | - name="name" |
55 | | - id="my-radio" |
56 | | - > |
57 | | - <label |
58 | | - class="ds-label" |
59 | | - data-weight="regular" |
60 | | - for="my-radio" |
61 | | - >Radio</label> |
62 | | -</div> |
| 68 | +In React, building a radio is easier, because we have a ready-made component that handles most of the logic and state management for us. |
63 | 69 |
|
64 | | -``` |
| 70 | +`Radio` is a composite component that uses [field](/en/components/docs/field/overview), [label](/en/components/docs/label/overview), [validation message](/en/components/docs/validation-message/overview), and [input](/en/components/docs/input/overview) to create a radio. |
65 | 71 |
|
66 | | -### In Fieldset |
| 72 | +In addition, we have a dedicated [useRadioGroup](/en/components/utilities/use-radio-group) React hook to make it easier to manage a group of Radio components. |
67 | 73 |
|
68 | | -The code below is an example of how to use multiple `Radio` inside `<fieldset>`. |
| 74 | +```tsx |
| 75 | +import { Radio } from '@digdir/designsystemet-react'; |
69 | 76 |
|
70 | | -```html |
71 | | -<fieldset class="ds-fieldset"> |
72 | | - <legend class="ds-label" data-weight="medium">Can we contact you by email?</legend> |
73 | | - <p class="ds-paragraph" data-variant="default">If you do not wish to be contacted by email, we will send you a letter by post.</p> |
74 | | - <div class="ds-field"> |
75 | | - <input |
76 | | - class="ds-input" |
77 | | - type="radio" |
78 | | - value="yes" |
79 | | - id="radio-input" |
80 | | - > |
81 | | - <label |
82 | | - class="ds-label" |
83 | | - data-weight="regular" |
84 | | - for="radio-input" |
85 | | - >Yes</label> |
86 | | - </div> |
87 | | - <div class="ds-field"> |
88 | | - <input |
89 | | - class="ds-input" |
90 | | - type="radio" |
91 | | - value="no" |
92 | | - id="radio-input" |
93 | | - > |
94 | | - <label |
95 | | - class="ds-label" |
96 | | - data-weight="regular" |
97 | | - for="radio-input" |
98 | | - >No</label> |
99 | | - </div> |
100 | | -</fieldset> |
| 77 | +<Radio label="Radio" value="value" name="name" /> |
101 | 78 | ``` |
102 | 79 |
|
103 | | -## CSS variables and data attributes |
104 | | -Checkbox is a composite component, and therefore we show variables and data attributes from `ds-input` here. |
105 | | -<CssVariables /> |
106 | | - |
107 | | -<CssAttributes /> |
| 80 | +<ReactComponentDocs /> |
0 commit comments