mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

add hideLabel to ComboBox

Browse source
This commit is contained in:
Nick Wing 2025-04-18 09:14:35 -05:00
commit 67bfd802a4
4 changed files with 23 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -671,6 +671,7 @@ export interface ComboBoxItem {
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox | | size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox | | titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |

12
docs/src/COMPONENT_API.json
View file

@ -1851,6 +1851,18 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "hideLabel",
"kind": "let",
"description": "Set to `true` to visually hide the label text",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{ {
"name": "placeholder", "name": "placeholder",
"kind": "let", "kind": "let",

5
src/ComboBox/ComboBox.svelte
View file

@ -46,6 +46,9 @@
/** Specify the title text of the combobox */ /** Specify the title text of the combobox */
export let titleText = ""; export let titleText = "";
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/** Specify the placeholder text */ /** Specify the placeholder text */
export let placeholder = ""; export let placeholder = "";
@ -226,7 +229,7 @@
<div class:bx--list-box__wrapper={true}> <div class:bx--list-box__wrapper={true}>
{#if titleText || $$slots.titleText} {#if titleText || $$slots.titleText}
<label for={id} class:bx--label={true} class:bx--label--disabled={disabled}> <label for={id} class:bx--label={true} class:bx--label--disabled={disabled} class:bx--visually-hidden={hideLabel}>
<slot name="titleText"> <slot name="titleText">
{titleText} {titleText}
</slot> </slot>

6
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -60,6 +60,12 @@ type $Props = {
*/ */
titleText?: string; titleText?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/** /**
* Specify the placeholder text * Specify the placeholder text
* @default "" * @default ""