User Select

@include('_partials.class-table', [ 'rows' => [ [ '.select-none', 'user-select: none;', "Disable selecting text in an element.", ], [ '.select-text', 'user-select: text;', "Allow selecting text in an element.", ], [ '.select-all', 'user-select: all;', "Allow clicking to select all text in an element.", ], [ '.select-auto', 'user-select: auto;', "Default browser behavior", ], ] ])

Disable selecting text

Use .select-none to prevent selecting text in an element and its children.

@component('_partials.code-sample', ['class' => 'text-center'])

@slot('code')@endslot @endcomponent

Allow selecting text

Use .select-text to allow selecting text in an element and its children.

@component('_partials.code-sample', ['class' => 'text-center'])

@slot('code')@endslot @endcomponent

Select all text in one click

Use .select-all to automatically select all the text in an element when a user clicks.

@component('_partials.code-sample', ['class' => 'text-center'])

@slot('code')@endslot @endcomponent

Auto

Use .select-auto to use the default browser behavior for selecting text. Useful for undoing other classes like .select-none at different breakpoints.

@component('_partials.code-sample', ['class' => 'text-center'])

@slot('code')@endslot @endcomponent

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'user-select', 'property' => 'userSelect', ], 'variants' => [ 'responsive', ], ])