Currency
Currency is an input field used for currency.
Usage
import { Currency } from 'stwui';
import Currency from 'stwui/currency';
<script lang="ts">
import { Currency } from 'stwui';
</script>
<Currency name="currency" placeholder="Basic" />
<script lang="ts">
import { Currency } from 'stwui';
</script>
<Currency name="currency">
<Currency.Label slot="label">Label</Currency.Label>
</Currency>
With Leading
<script lang="ts">
import { Currency } from 'stwui';
</script>
<Currency name="currency">
<Currency.Label slot="label">Label</Currency.Label>
<Currency.Leading slot="leading" data={currency_usd} />
</Currency>
With Trailing
<script lang="ts">
import { Currency } from 'stwui';
</script>
<Currency name="currency-3" class="w-full max-w-[400px]">
<Currency.Label slot="label">Label</Currency.Label>
<Currency.Trailing slot="trailing" data={currency_usd} />
</Currency>
You're doing it wrong!
<script lang="ts">
import { Currency } from 'stwui';
</script>
<Currency name="currency" {error} bind:value allowClear>
<Currency.Label slot="label">Label</Currency.Label>
<Currency.Leading slot="leading" data={email} />
</Currency>
<script lang="ts">
import { Currency } from 'stwui';
</script>
<Currency name="currency" disabled>
<Currency.Label slot="label">Label</Currency.Label>
</Currency>
Currency Props
| name | string | nanoid() |
| error | string | undefined | |
| placholder | string | undefined | |
| value | string | undefined | |
| autocomplete | 'on' | 'off' | undefined | |
| autocapitalize | 'off' | 'none' | 'sentences' | 'words' | 'characters' | off |
| readonly | boolean | |
| disabled | boolean | false |
Currency Slots
| label | <Currency.Label slot="label" /> |
| leading | <Currency.Leading slot="leading" /> |
| trailing | <Currency.Trailing slot="trailing" /> |
Currency.Leading Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Currency.Trailing Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Currency Class Identifiers
| stwui-currency-wrapper |
| stwui-currency-input |
| stwui-currency-leading-wrapper |
| stwui-currency-clear-wrapper |
| stwui-currency-trailing-wrapper |
| stwui-currency-error-icon |
| stwui-currency-error |
| stwui-currency-label |
