mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
b6fa25c3e7* chore(deps-dev): upgrade carbon-components to v10.39.0 * fix(data-table): deprecate Table shouldShowBorder prop Ref:0f7324156* fix(form-group): add legendId Ref:4fc56c30b* feat(number-input): support readonly variant Ref:d0bd8eddb* feat(multi-select): export multiSelectRef, fieldRef, selectionRef * feat(local-storage): add clearItem, clearAll instance methods * docs(local-storage): simplify clear example * docs(local-storage): add instructions [ci skip] * chore(local-storage): reset value on clear [ci skip] * chore(local-storage): revert value clear [ci skip]
40 lines
977 B
Svelte
40 lines
977 B
Svelte
<script>
|
|
/** Set to `true` for to remove the bottom margin */
|
|
export let noMargin = false;
|
|
|
|
/** Set to `true` to indicate an invalid state */
|
|
export let invalid = false;
|
|
|
|
/** Set to `true` to render a form requirement */
|
|
export let message = false;
|
|
|
|
/** Specify the message text */
|
|
export let messageText = "";
|
|
|
|
/** Specify the legend text */
|
|
export let legendText = "";
|
|
|
|
/** Specify an id for the legend element */
|
|
export let legendId = "";
|
|
</script>
|
|
|
|
<fieldset
|
|
data-invalid="{invalid || undefined}"
|
|
class:bx--fieldset="{true}"
|
|
class:bx--fieldset--no-margin="{noMargin}"
|
|
aria-labelledby="{$$restProps['aria-labelledby'] || legendId}"
|
|
{...$$restProps}
|
|
on:click
|
|
on:mouseover
|
|
on:mouseenter
|
|
on:mouseleave
|
|
>
|
|
<legend
|
|
class:bx--label="{true}"
|
|
id="{legendId || $$restProps['aria-labelledby']}">{legendText}</legend
|
|
>
|
|
<slot />
|
|
{#if message}
|
|
<div class:bx--form__requirement="{true}">{messageText}</div>
|
|
{/if}
|
|
</fieldset>
|