Skip to content

Commit 43b32a0

Browse files
ThunearThunear
authored
docs(textarea): web-first (#4866)
1 parent 3e2728b commit 43b32a0

5 files changed

Lines changed: 58 additions & 77 deletions

File tree

‎apps/www/app/content/components/textarea/en/code.mdx‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
1-
<Story story="Preview" layout="column" />
2-
<ReactComponentDocs />
1+
<Story story="Preview" layout="column" defaultOpen />
32

43
## Use
4+
Apply the class name `ds-input` to `<textarea>`.
55

6-
```tsx
7-
import { Textarea, Label } from '@digdir/designsystemet-react';
8-
9-
<>
10-
<Label htmlFor="my-textarea">Label</Label>
11-
<Textarea id="my-textarea" />
12-
</>
6+
```html
7+
<textarea class="ds-input"></textarea>
138
```
149

1510
## Example
@@ -20,23 +15,25 @@ This only affects the initial height of the field.
2015

2116
<Story story="WithRowsEn" layout="column" />
2217

23-
### Disabled
18+
## CSS variables and data attributes
19+
Textarea gets styling from `ds-input`, so we show variables and data attributes from that class here.
2420

25-
<Story story="Disabled" layout="column" />
21+
Sizes are controlled with [data-size](/en/fundamentals/code/sizes) and colors with [data-color](/en/fundamentals/code/colors).
22+
The component will inherit from the closest parent where these are set.
2623

27-
### ReadOnly
24+
<CssVariables />
2825

29-
<Story story="ReadOnlyEn" layout="column" />
26+
<CssAttributes />
3027

31-
## HTML
32-
Apply the class name `ds-input` to `<textarea>`.
28+
## React
3329

34-
```html
35-
<textarea class="ds-input"></textarea>
36-
```
30+
```tsx
31+
import { Textarea, Label } from '@digdir/designsystemet-react';
3732

38-
## CSS variables and data attributes
39-
`Textarea` gets styling from `ds-input`, so we show variables and data attributes from that class here.
40-
<CssVariables />
33+
<>
34+
<Label htmlFor="my-textarea">Label</Label>
35+
<Textarea id="my-textarea" />
36+
</>
37+
```
4138

42-
<CssAttributes />
39+
<ReactComponentDocs />

‎apps/www/app/content/components/textarea/en/overview.mdx‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,19 @@ search_terms: multiline, comment
44

55
<Story story="Preview" layout="column" />
66

7-
**Use `Textarea` when**
7+
**Use the textarea when**
88
- users need to write more than one line of text
99
- free-form input is required
1010
- the answer does not follow a fixed structure
1111

12-
**Avoid using `Textarea` when**
13-
- short answers are expected, use [`Textfield`](/en/components/docs/textfield/overview) instead
12+
**Avoid using textarea when**
13+
- short answers are expected, use [textfield](/en/components/docs/textfield/overview) instead
1414
- the input consists of structured data that requires validation
1515

1616
## Example
1717

18-
### Set the height
19-
Developers can set how many rows a `Textarea` should have by using the `rows` attribute. This only affects the initial height of the field.
20-
21-
It is useful for giving users an indication of how much text is expected.
22-
23-
<Story story="WithRowsEn" layout="column" />
24-
2518
### Disabled
26-
Avoid disabling a `Textarea` if possible. It can be difficult for users to understand why the field cannot be used. Read more about [why disabled states are problematic (nav.no)](https://aksel.nav.no/god-praksis/artikler/deaktiverte-tilstander) and which alternatives to consider.
19+
Avoid disabling a textarea if possible. It can be difficult for users to understand why the field cannot be used. Read more about [why disabled states are problematic (nav.no)](https://aksel.nav.no/god-praksis/artikler/deaktiverte-tilstander) and which alternatives to consider.
2720

2821
<Story story="Disabled" layout="column" />
2922

@@ -34,26 +27,25 @@ Fields with the `readonly` attribute remain part of the tab order. Users can cop
3427

3528
**Important: If you choose to use `readOnly`, you must explain to the user why the content cannot be edited.**
3629

37-
3830
<Story story="ReadOnlyEn" layout="column" />
3931

4032
## Guidelines
41-
Use `Textarea` when users are expected to write more than one line of text, for example open questions, feedback, or other situations requiring longer input.
33+
Use textarea when users are expected to write more than one line of text, for example open questions, feedback, or other situations requiring longer input.
4234

4335
Be aware that some users find free-text fields challenging. In certain cases, it may be better to break the question into smaller, more structured parts and let users answer with components such as `Radio`.
4436

4537
### Size and adaptation
4638

4739
#### Height
48-
The height of the `Textarea` should reflect the expected amount of text. If you expect approximately three lines of input, the initial height should match this. For longer responses, provide more visual space to ensure a good user experience. You can set the height with `rows="{number}"`.
40+
The height of the `textarea` should reflect the expected amount of text. If you expect approximately three lines of input, the initial height should match this. For longer responses, provide more visual space to ensure a good user experience. You can set the height with `rows="{number}"`.
4941

50-
`Textarea` should expand in height when users need more space. Unless `rows` is set, the field will automatically grow as the user types so they can see their full input without scrolling.
42+
Textarea should expand in height when users need more space. Unless `rows` is set, the field will automatically grow as the user types so they can see their full input without scrolling.
5143

5244
#### Width
53-
A `Textarea` should not be wider than 50-75 characters including spaces. Staying within this range ensures the best readability for all users.
45+
A textarea should not be wider than 50-75 characters including spaces. Staying within this range ensures the best readability for all users.
5446

5547
### Additional guidelines
56-
In addition to these recommendations, follow the general guidelines for [`Textfield`](/en/components/docs/textfield/overview):
48+
In addition to these recommendations, follow the general guidelines for [textfield](/en/components/docs/textfield/overview):
5749

5850
* [Avoid placeholder text](/en/components/docs/textfield/overview#unngå-plassholdertekster)
5951
* [Input and formatting](/en/components/docs/textfield/overview#inndata)

‎apps/www/app/content/components/textarea/metadata.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"no": {
33
"title": "Textarea",
4-
"subtitle": "`Textarea` brukes når brukeren skal kunne skrive inn tekst som går over flere linjer. "
4+
"subtitle": "Textarea brukes når brukeren skal kunne skrive inn tekst som går over flere linjer. "
55
},
66
"en": {
77
"title": "Textarea",
8-
"subtitle": "`Textarea` is used when the user needs to enter text that spans multiple lines. "
8+
"subtitle": "Textarea is used when the user needs to enter text that spans multiple lines. "
99
},
1010
"image": "Textarea.svg",
1111
"cssFile": "input.css"

‎apps/www/app/content/components/textarea/no/code.mdx‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,39 @@
1-
<Story story="Preview" layout="column" />
2-
<ReactComponentDocs />
1+
<Story story="Preview" layout="column" defaultOpen />
32

43
## Bruk
4+
Legg klassenavnet `ds-input` på `<textarea>`.
55

6-
```tsx
7-
import { Textarea, Label } from '@digdir/designsystemet-react';
8-
<>
9-
<Label htmlFor="my-textarea">Label</Label>
10-
<Textarea id="my-textarea" />
11-
</>
6+
```html
7+
<textarea class="ds-input"></textarea>
128
```
139

1410
## Eksempel
1511

16-
### Med rader
12+
### Sett høyden
13+
1714
Bruk `rows`-attributtet for å sette antall synlige rader i tekstområdet.
1815
Dette påvirker kun den initielle høyden på feltet.
1916

2017
<Story story="WithRows" layout="column" />
2118

22-
### Disabled
19+
## CSS variablar og data-attributter
20+
Textarea får styling fra `ds-input`, og derfor viser vi variabler og data-attributter fra den klassen her.
2321

24-
<Story story="Disabled" layout="column" />
22+
Størrelser styres med [data-size](/no/fundamentals/code/sizes) og farger med [data-color](/no/fundamentals/code/colors).
23+
Komponenten vil arve nærmeste forelder med disse satt.
2524

26-
### ReadOnly
25+
<CssVariables />
2726

28-
<Story story="ReadOnly" layout="column" />
27+
<CssAttributes />
2928

30-
## HTML
31-
Legg klassenavnet `ds-input` på `<textarea>`.
29+
## React
3230

33-
```html
34-
<textarea class="ds-input"></textarea>
31+
```tsx
32+
import { Textarea, Label } from '@digdir/designsystemet-react';
33+
<>
34+
<Label htmlFor="my-textarea">Label</Label>
35+
<Textarea id="my-textarea" />
36+
</>
3537
```
3638

37-
## CSS variablar og data-attributter
38-
`Textarea` får styling fra `ds-input`, og derfor viser vi variabler og data-attributter fra den klassen her.
39-
<CssVariables />
40-
41-
<CssAttributes />
39+
<ReactComponentDocs />

‎apps/www/app/content/components/textarea/no/overview.mdx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,19 @@ search_terms: tekstfelt, fritekst, kommentarfelt, multiline, comment
44

55
<Story story="Preview" layout="column" />
66

7-
**Bruk `Textarea` når**
7+
**Bruk textarea når**
88
- brukeren skal kunne skrive mer enn én linje tekst
99
- brukeren skal få plass til å formulere seg fritt
1010
- svaret ikke har en fast struktur
1111

12-
**Unngå `Textarea` når**
13-
- du forventer korte svar, bruk heller [`Textfield`](/no/components/docs/textfield/overview)
12+
**Unngå textarea når**
13+
- du forventer korte svar, bruk heller [textfield](/no/components/docs/textfield/overview)
1414
- det er strukturerte data som skal valideres, f.eks fødselsnummer eller dato
1515

1616
## Eksempel
1717

18-
### Angi høyden
19-
I kode kan en utvikler bestemme hvor mange rader et tekstområde skal ha ved å sette `rows`-attributtet. Dette påvirker kun den initielle høyden på feltet.
20-
21-
Dette er nyttig for å gi brukeren en indikasjon på hvor mye tekst som forventes.
22-
23-
<Story story="WithRows" layout="column" />
24-
2518
### Disabled
26-
Unngå å deaktivere `Textarea` hvis du kan. Det kan være vanskelig for brukerne å forstå hvorfor feltet ikke kan brukes. Les mer om [hvorfor deaktiverte tilstander er problematiske (nav.no)](https://aksel.nav.no/god-praksis/artikler/deaktiverte-tilstander) og hvilke alternativer som finnes.
19+
Unngå å deaktivere textarea hvis du kan. Det kan være vanskelig for brukerne å forstå hvorfor feltet ikke kan brukes. Les mer om [hvorfor deaktiverte tilstander er problematiske (nav.no)](https://aksel.nav.no/god-praksis/artikler/deaktiverte-tilstander) og hvilke alternativer som finnes.
2720

2821
<Story story="Disabled" layout="column" />
2922

@@ -37,21 +30,22 @@ Felter med `readonly`-attributtet er en del av tabrekkefølgen. Brukere kan kopi
3730
<Story story="ReadOnly" layout="column" />
3831

3932
## Retningslinjer
40-
Bruk `Textarea` når brukerne forventes å skrive inn mer enn én linje med tekst, for eksempel ved åpne spørsmål, tilbakemeldinger, eller andre situasjoner hvor lengre tekstinnhold er nødvendig.
33+
Bruk textarea når brukerne forventes å skrive inn mer enn én linje med tekst, for eksempel ved åpne spørsmål, tilbakemeldinger, eller andre situasjoner hvor lengre tekstinnhold er nødvendig.
4134

4235
Vær oppmerksom på at brukerne kan synes det er vanskelig å skrive fritekst eller svare på åpne spørsmål. Noen ganger kan det være bedre å bryte opp spørsmålet i flere enklere spørsmål, og gi brukerne mulighet til å svare med for eksempel `radio`.
4336

4437
### Størrelse og tilpasning
38+
4539
#### Høyden på tekstområdet
4640
Høyden på `textarea` bør tilpasses forventet tekstmengde. Forventer du at brukeren skal skrive tre linjer, bør høyden reflektere dette. For lengre tekster er det viktig å gi mer visuell plass for en bedre brukeropplevelse. Du kan endre høyde med `rows="{number}"`.
4741

48-
`Textarea` skal kunne tilpasses i høyden, når brukeren har behov for mer plass. Feltet vil automatisk utvide seg når brukeren skriver, dersom du ikke setter `rows`, slik at de alltid kan se hele innholdet sitt uten å måtte bruke rullefelt.
42+
Textarea skal kunne tilpasses i høyden, når brukeren har behov for mer plass. Feltet vil automatisk utvide seg når brukeren skriver, dersom du ikke setter `rows`, slik at de alltid kan se hele innholdet sitt uten å måtte bruke rullefelt.
4943

5044
#### Bredden på teksområdet
5145
Et tekstområde bør ikke være bredere enn 50-75 tegn inkludert mellomrom. Hvis vi holder oss til det, blir lesbarheten best for alle brukere.
5246

5347
### Øvrige retningslinjer
54-
I tillegg til disse retningslinjene, bør du også følge de generelle retninglinjene for [`Textfield`](/no/components/docs/textfield/overview):
48+
I tillegg til disse retningslinjene, bør du også følge de generelle retninglinjene for [textfield](/no/components/docs/textfield/overview):
5549

5650
* [Unngå plassholdertekster](/no/components/docs/textfield/overview#unngå-plassholdertekster)
5751
* [Inndata og formatering](/no/components/docs/textfield/overview#inndata)

0 commit comments

Comments
 (0)