# VisuallyHidden

Clips text visually while retaining it for accessible naming and reading.

## Signatures

```ts
export declare function VisuallyHidden<const Options extends VisuallyHiddenOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, VisuallyHiddenInternalProps>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
```



## Examples

```ts
import { RefSubject } from "@typed/fx";
import { html } from "@typed/template";
import { Button } from "@typed/ui/Button";
import { component } from "@typed/template";
import { VisuallyHidden } from "@typed/ui/VisuallyHidden";

export const ResetCounter = component(function* () {
  const count = yield* RefSubject.make(3);
  return html`<div>
    <p>Selected items: ${count}</p>
    ${Button({
    content: html`
      <span aria-hidden="true">×</span>
      ${VisuallyHidden({ content: "Clear selection" })}
    `,
    props: { class: "icon-action" },
    onclick: RefSubject.set(count, 0),
    })}
  </div>`;
});
```