svelte-material-ui/packages/site/src/routes/demo/textfield/_PersistentHelperText.svelte at master · hperrin/svelte-material-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="columns margins">
  <div>
    <Textfield bind:value={valueA} label="Standard">
      {#snippet helper()}
        <HelperText persistent>Helper Text</HelperText>
      {/snippet}
    </Textfield>

    <pre class="status">Value: {valueA}</pre>
  </div>
  <div>
    <Textfield variant="filled" bind:value={valueB} label="Filled">
      {#snippet helper()}
        <HelperText persistent>Helper Text</HelperText>
      {/snippet}
    </Textfield>

    <pre class="status">Value: {valueB}</pre>
  </div>
  <div>
    <Textfield variant="outlined" bind:value={valueC} label="Outlined">
      {#snippet helper()}
        <HelperText persistent>Helper Text</HelperText>
      {/snippet}
    </Textfield>

    <pre class="status">Value: {valueC}</pre>
  </div>
</div>

<script lang="ts">
  import Textfield from '@smui/textfield';
  import HelperText from '@smui/textfield/helper-text';

  let valueA = $state('');
  let valueB = $state('');
  let valueC = $state('');
</script>