add hideLabel to ComboBox

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

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 |
| 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 |
| 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 |
| 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 |

View file

@ -1851,6 +1851,18 @@
"constant": 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",
"kind": "let",

View file

@ -46,6 +46,9 @@
/** Specify the title text of the combobox */
export let titleText = "";
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/** Specify the placeholder text */
export let placeholder = "";
@ -226,7 +229,7 @@
<div class:bx--list-box__wrapper={true}>
{#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">
{titleText}
</slot>

View file

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