mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
chore(combobox): move helper text below input
This commit is contained in:
parent
e9f4c1d727
commit
05bc19d96c
2 changed files with 8 additions and 7 deletions
|
@ -15,6 +15,7 @@ export const Default = () => ({
|
||||||
size: select("Field size (size)", sizes, ""),
|
size: select("Field size (size)", sizes, ""),
|
||||||
placeholder: text("Placeholder text (placeholder)", "Filter..."),
|
placeholder: text("Placeholder text (placeholder)", "Filter..."),
|
||||||
titleText: text("Title (titleText)", "Combobox title"),
|
titleText: text("Title (titleText)", "Combobox title"),
|
||||||
|
helperText: text("Helper text (helperText)", "Optional helper text here"),
|
||||||
light: boolean("Light (light)", false),
|
light: boolean("Light (light)", false),
|
||||||
disabled: boolean("Disabled (disabled)", false),
|
disabled: boolean("Disabled (disabled)", false),
|
||||||
invalid: boolean("Invalid (invalid)", false),
|
invalid: boolean("Invalid (invalid)", false),
|
||||||
|
|
|
@ -187,13 +187,6 @@
|
||||||
{titleText}
|
{titleText}
|
||||||
</label>
|
</label>
|
||||||
{/if}
|
{/if}
|
||||||
{#if helperText}
|
|
||||||
<div
|
|
||||||
class:bx--form__helper-text="{true}"
|
|
||||||
class:bx--form__helper-text--disabled="{disabled}">
|
|
||||||
{helperText}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<ListBox
|
<ListBox
|
||||||
class="bx--combo-box"
|
class="bx--combo-box"
|
||||||
id="{comboId}"
|
id="{comboId}"
|
||||||
|
@ -304,4 +297,11 @@
|
||||||
</ListBoxMenu>
|
</ListBoxMenu>
|
||||||
{/if}
|
{/if}
|
||||||
</ListBox>
|
</ListBox>
|
||||||
|
{#if !invalid && helperText}
|
||||||
|
<div
|
||||||
|
class:bx--form__helper-text="{true}"
|
||||||
|
class:bx--form__helper-text--disabled="{disabled}">
|
||||||
|
{helperText}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue