Input group

Addon and field share one hairline.

https://

Host

Where it lives

Addon and field share one hairline.

https://

Install

npx @noordvc/raster-cli add input-group

Markup

<div class="rs-input-group"><span class="rs-input-addon">https://</span><input class="rs-input" placeholder="raster.noord.dev" /></div>

React

import { InputAddon, InputGroup } from "@/components/raster/input-group";

<InputGroup>
  <InputAddon>https://</InputAddon>
  <input className="rs-input" placeholder="raster.noord.dev" />
</InputGroup>

Classes

.rs-input-group.rs-input-addon.rs-input-group-end

Depends on

/input