@citizensadvice/text-inputs

Define styling for the text input components (`<input/>`, `<textarea/>`). Enclose both the `<label/>` and `<input/>` within a `<div/>` with the class `text-input`.

Usage no npm install needed!

<script type="module">
  import citizensadviceTextInputs from 'https://cdn.skypack.dev/@citizensadvice/text-inputs';
</script>

README

Text-inputs npm (scoped)

Define styling for the text input components (<input/>, <textarea/>). Enclose both the <label/> and <input/> within a <div/> with the class text-input.

Examples

<div class="text-input">
  <label class="block bold mb-2" for="firstname">Firstname</label>
  <input type="text" id="firstname">
</div>

OR

<div class="text-input">
  <label class="block bold mb-2" for="message">Message</label>
  <textarea id="message"></textarea>
</div>

Installation

$ npm install @citizensadvice/text-inputs

now import into your stylesheet...

@import '@citizensadvice/text-inputs/index.scss';

You can also make use of the unpkg service, try adding the link below to the head of your HTML file

<link src="https://unpkg.com/@citizensadvice/text-inputs@latest/build/text-inputs.css" />