### File

`src/input/input.directive.ts`

### Description

A directive for applying styling to an input element.

Example:

     * <input ibmText/>
     *

See the vanilla carbon docs for more detail.

### Metadata

Selector | `[ibmText]`

### Index

###### Inputs
invalid skeleton theme
###### HostBindings
class.bx--text-input class.bx--text-input--light

### Inputs

`invalid` | Default value : `false`
Defined in src/input/input.directive.ts:24

`skeleton` | Default value : `false`
Defined in src/input/input.directive.ts:25

`theme` | `light` or `dark` input theme Type : `"light" | "dark"` Default value : `"dark"`
Defined in src/input/input.directive.ts:21

### HostBindings

class.bx--text-input
`class.bx--text-input: ```
Default value : `true`
Defined in src/input/input.directive.ts:23

class.bx--text-input--light
`class.bx--text-input--light: ```
Defined in src/input/input.directive.ts:26

    import { Directive, HostBinding, Input } from "@angular/core";

    /**
     * A directive for applying styling to an input element.
     *
     * Example:
     *
     * ```html
     * <input ibmText/>
     * ```
     *
     * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.
     */
    @Directive({
    	selector: "[ibmText]"
    })
    export class TextInput {
    	/**
    	 * `light` or `dark` input theme
    	 */
    	@Input() theme: "light" | "dark" = "dark";

    	@HostBinding("class.bx--text-input") inputClass = true;
    	@HostBinding("class.bx--text-input--invalid") @Input() invalid = false;
    	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
    	@HostBinding("class.bx--text-input--light") get isLightTheme() {
    		return this.theme === "light";
    	}
    }

# result-matching ""

# No results matching ""